لدي مشكلة في تبديل الشريط الجانبي باستخدام jQuery

Question

أحاول إنشاء شريطة بسيطة بسيطة باستخدام jQuery، حيث يتوسع والعقود عند الضغط على زر. يتغير الزر أيضا إلى نوع آخر من زر عند الضغط عليه. سيتوسع الشريط الجانبي، ولكن لسبب ما، لن يعوده إلى موقعه الأصلي. يمكنك رؤية نسخة من JavaScript و HTML في http://www.jqueryhelp.com/viewtopic.php؟p=4241#4241.

هنا هو رمز العمل، شكرا BendeWay! :د

$(".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

حاول بدلا من الاستخدام الصحيح يترك برقم سالب. بالإضافة إلى ذلك، أود أن أوصي باستخدام pengdDefault بدلا من العودة كاذبة.

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

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

تحديث

قطعة أخرى لاحظتها فقط هي أن إرفاق الحدث انقر فوق الزر "الناشط"، عندما تكون المستند جاهزة، ولكن لا يوجد زر غير نشط عند تشغيل المستند جاهزا يأتي بعد تغييره. هناك خيارات زوجين هنا.

أولا هو استخدام الجديد يعيش ميزة jQuery 1.3

$(".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");
}); 

سيكون الخيار الآخر هو تعيين حدث Click على معدل مختلف (على سبيل المثال. على المعرف، ربما).

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

ثم استخدم هذا للتعامل مع النقر

$("#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');  
}); 

أو حتى أكثر موجزة

$("#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');  
}); 

الخيار النهائي الذي يمكنني التفكير فيه هو تعيين أحداث النقر بعد تغييرها، لكنني لن أفعل ذلك، لذلك لن أوفر عينة.

أخيرا، أود أن أضع تنبيه في ردك النشط وتأكد من أن حدث الزر النشط الخاص بك يطلق في الواقع.

Answer 2

الطريقة التي كتبها منطقك مكتوبة، أعتقد أنك بحاجة إلى القيام ب "toggleclass" على كلا الفئتين داخل معالجاتك النقر التي ستضيف واحدة وإزالة الآخر. على سبيل المثال، عند النقر فوق العنصر الخاص بك "النشط"، قمت بالتبديل (إضافة) فئة BTN-Slide، ولكن هذا سيغادر الفئة "النشطة" في مكانها أيضا.

بالطبع بدلا من استخدام "Toggleclass"، يمكنك أيضا استخدام "AddClass" و "RemoveClass" لتكون أكثر صراحة.

أوصي باستخدام أداة مثل Firebug لمشاهدة ما يحدث داخل Dom.

$(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

هذا يعمل.

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

Answer 4

أتش تي أم أل

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

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;
   }
 });
});

CSS.

#main { height:200px; }

تفسير

حسنا اخترت القيام بذلك بشكل مختلف قليلا. هذا تهيئة مع ارتفاع جربتنا كونك 200px وعرض تلقائي. عند النقر فوق الارتباط التشعبي، يتم إخفاء التجربة في 1.3 ثانية، ويتم تعيين مفتاح التبديل على 0. عند النقر مرة أخرى، تعود مرة أخرى على مدى 1.3 ثانية، ويعود مفتاح التبديل إلى 1. مثل مفتاح إضاءة. لقد استخدمت التحريك هنا لأن تتلاشى بسيطة أو إخفاء حصلت لي بالملل ...

السبب في أنه حصلت على عرض وارتفاه العنصر قبل الصفر جي كان إذا كان قد قال العرض: 100٪ "و hieght:" 100٪ "في التحريك الخاص بي ستحددها إلى 100٪ من عرض الصفحات والارتفاع .. نحن لا نريد ذلك.

ملاحظة: أنا أيضا استخدام التعتيم خلال فترة زمنية. لطيفة جدا للتبديل كذلك :)