jquery - 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

基本的 slideToggle() 示例。

我猜你的活动课程的 css 是 = display:block; 你的 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。