jQuery的切換不能正常工作

Question

我有這樣的jQuery代碼：

$('.item_bar_action_holder_drop a').click(function() { 
      var item_bar = $('.item_bar_action_holder_actions'); 
      if(item_bar.is(':visible')) { 
       $(this).removeClass('active'); 
      } else { 
       $(this).addClass('active'); 
      } 
      item_bar.slideToggle('fast', function() { 
      }); 
     }); 

這裏的問題是，當我點擊多少次按鈕「活動」類將設定爲關閉面板和它的錯。我不明白爲什麼它發生。

Answer 1

檢查是否item_bar被動畫的時候，不要再排隊行爲，如果它是：

$('.item_bar_action_holder_drop a').click(function() { 
    var item_bar = $('.item_bar_action_holder_actions'); 
    if (item_bar.is(':animated')) { 
     return; 
    } 
    ... 
}); 

Answer 2

Basic slideToggle() example.

我猜你的活動類的CSS是=顯示：塊;你的item_bar的默認CSS是display：none;如果我是正確的;你可以用這種方式太：

$(document).ready(function() { 
    $('.item_bar_action_holder_drop a').click(function() { 
     var item_bar = $('.item_bar_action_holder_actions'); 

     item_bar.removeClass('active');//removes class from all 
     $(this).addClass('active');//adds class clicked one 

     if(item_bar.is(':visible')) {//edited here ! 
     item_bar.slideToggle('fast',function() { 
      $(this).removeClass('active');//removes class when animate complete 
     }); 
     } 
    }); 
    //if you want to show first panel when your document is ready 
    $('.item_bar_action_holder_actions:first').show().addClass('active'); 
}); 

注意：您沒有顯示你的HTML，所以我試圖猜測您的HTML。