Ich habe ein Problem mit einem Hin- und Herschalten Sidebar bekam mit jQuery

Question

Ich versuche, eine einfache Hin- und Herschalten Sidebar mit Jquery zu schaffen, wo es expandiert und kontrahiert, wenn eine Taste gedrückt wird. Die Schaltfläche ändert sich auch auf eine andere Art von Taste, wenn sie gedrückt. Die Seitenleiste wird erweitert, aber aus irgendeinem Grund, wird es nicht bewegen zurück zu seiner ursprünglichen Position. Sie können eine Kopie der JavaScript und HTML unter http: //www.jqueryhelp .com / viewtopic.php? p = 4241 # 4241

Hier ist der Arbeits Code dank Bendeway! : D

$(".btn-slide").live('click', function(e){ 
   e.preventDefault();

   $("#sidebar").animate({opacity: "show", left: 250}, "slow"); 
   $(this).toggleClass("btn-slide").toggleClass("active");
}); 

$(".active").live('click', function(e){ 
   e.preventDefault();

   $("#sidebar").animate({opacity: "hide", left: 100}, "slow"); 
   $(this).toggleClass("btn-slide").toggleClass("active");
});

Answer 1

versuchen, anstatt direkt die Verwendung mit einer negativen Zahl links. zusätzlich würde ich mit prevent statt Rückkehr falsch empfehlen.

$(".active").click(function(e){ 
   e.preventDefault();

   $("#sidebar").animate({opacity: "hide", left: -250}, "slow"); 
   $(this).toggleClass("btn-slide");
}); 

Update

Ein weiteres Stück i ist nur aufgefallen, dass Ihr ein Click-Ereignis auf die .active Taste angebracht wird, wenn das Dokument fertig ist, aber es gibt keine .active-Taste, wenn das Dokument fertig ist, dass kommt in nachdem Sie es ändern. Es gibt ein paar Möglichkeiten.

Zuerst ist die neue leben

$(".btn-slide").live('click', function(e){ 
   e.preventDefault();

   $("#sidebar").animate({opacity: "hide", left: 250}, "slow"); 
   $(this).toggleClass("btn-slide").toggleClass("active");
}); 

$(".active").live('click', function(e){ 
   e.preventDefault();

   $("#sidebar").animate({opacity: "hide", left: -250}, "slow"); 
   $(this).toggleClass("btn-slide").toggleClass("active");
}); 

Die andere Möglichkeit wäre, das Click-Ereignis auf einem anderen Modifikator gesetzt haben (z. B. auf der id, vielleicht).

<span>News  <img src="img/overlay.png" id="sliderButton" class="btn-slide" alt="" /></span>     

dann verwenden, um dies den Klick zu behandeln

$("#sliderButton").click(function(e){ 
  e.preventDefault();

  $(this).is('.btn-slide').each(function() {
   $("#sidebar").animate({opacity: "show", left: 250}, "slow"); 
  });

  $(this).is('.active').each(function() {
   $("#sidebar").animate({opacity: "hide", left: -250}, "slow"); 
  });
  $(this).toggleClass("active").toggleClass('btn-slide');  
}); 

oder sogar prägnante

$("#sliderButton").click(function(e){ 
  e.preventDefault();

  var animationSettings = {opacity: "show", left: 250};
  if ($(this).hasClass('active') )
  {
    animationSettings = {opacity: "hide", left: -250};
  } 

  $("#sidebar").animate(animationSettings , "slow"); 
  $(this).toggleClass("active").toggleClass('btn-slide');  
}); 

Die letzte Option, die ich denken kann, wäre es, die Click-Ereignisse zu setzen, nachdem Sie sie ändern, aber ich würde nicht, dass so eine Probe Ich werde liefern nicht.

Schließlich möchte ich in Alarm in Ihrer aktiven Rückruf setzen und stellen Sie sicher, dass Ihre aktive Schaltfläche Ereignis tatsächlich feuert.

Answer 2

Die Art und Weise Ihre Logik geschrieben, ich glaube, Sie ‚toggleClass‘ auf beiden Klassen in Ihrem Klick-Handler tun müssen, die man hinzufügen und das andere entfernen. Zum Beispiel, wenn Ihr „aktiv“ Element geklickt wird Sie wechseln (add) die BTN-Slide-Klasse, aber das wird die „aktive“ Klasse statt verlassen.

Natürlich anstelle von „toggleClass“ Sie auch „addClass“ verwenden könnten und „removeClass“ deutlicher zu sein.

Ich empfehle ein Tool wie Firebug zu sehen, was in Ihrem DOM passiert.

$(document).ready(function(){

   $(".btn-slide").click(function(){
   $("#sidebar").animate({opacity: "show", left: "250"}, "slow");
   $(this).toggleClass("active");  // add class
   $(this).toggleClass("btn-slide"); // remove class
   return false;
   });   

});

$(document).ready(function(){

   $(".active").click(function(){
   $("#sidebar").animate({opacity: "hide", right: "250"}, "slow");
   $(this).toggleClass("active");  // remove class
   $(this).toggleClass("btn-slide");  // add class
   return false;
   });
}); 

Answer 3

Das funktioniert.

$(document).ready(function(){
    $(".btn-slide").click(function(){
        $("#sidebar").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });
});

Answer 4

Die HTML

<div id="content">
 <a href="#" id="ec">Expand / Contract</a>
 <div id="main">
   Watch Me Shrink Or Grow
 </div>
</div>

Die JQuery

$(function() {
 var ecswitch = 1;
 /* prevent the annoying scroll back up thing */
 $("#ec").click(function(e) {
   e.preventDefault();
   var x = $("#main").width(); // get element width
   var y = $("#main").height(); // get element height 
   if(ecswitch == 1) {
    $("#main").animate({opacity:0, hieght:"0", width:"0"}, 1300);
    ecswitch = 0;
   } else {
     $("#main").animate({opacity:1, hieght:y, width:x}, 1300);
    ecswitch = 1;
   }
 });
});

Die CSS

#main { height:200px; }

Erklärung

OK wählte ich anders dies ein wenig zu tun. dies initialisiert mit der Höhe unseres Experiments ist 200px und die Breite ist automatisch. Wenn Sie den Hyper-Link klicken wird das Experiment in 1,3 Sekunden ausgeblendet und einen Schalter auf 0 gesetzt, wenn Sie erneut auf sie zurück über einen Zeitraum von 1,3 Sekunden kommt und der Schalter wie ein Lichtschalter auf 1 zurückkommt. Ich benutzen die belebten hier, weil ein einfaches verblasst oder verbergen habe ich gelangweilt ...

Der Grund, warum ich die Breiten und Höhen des Elements bekam vor Null-ing sie wurde, wenn die Breite: 100%“und hieght:‚100%‘in meinem belebten es zu 100% der Seiten einstellen würde Breite und Höhe ... wir wollen das nicht.

Hinweis: Ich bin auch die Opazität über einen längeren Zeitraum nicht benutzt. ganz nett als auch für Verblassen:)