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

这里的问题是当我点击多次按钮时，“active”类将设置为一个关闭的面板而且它是错误的。我不明白为什么会这样。

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是= 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。

Jquery切换不能正常工作

2 个答案: