jquery - 在为另一个菜单设置动画之前关闭打开的菜单

Question

我正在尝试，并且仍在寻找解决此问题的最佳方法。我有多个下拉菜单。我正在尝试检查其他打开的菜单，关闭它们，然后在单击的菜单上运行动画，或者简单地关闭单击的菜单(如果已打开)。这是我迄今为止所拥有的。

$('ul.primary li').click(function(event) {
            if ($(this).children('ul.drop').is(':visible')) {
                $(this).children('ul.drop').slideUp(function() {
                    $(this).parent('li').removeClass('active');
                });
            }
            else if ($(this).siblings().children('ul.drop').is(':visible')) {
                        $(this).siblings().children('ul.drop').slideUp(function() {
                            $(this).parent('li').removeClass('active');
                        });
                        $(this).children('ul.drop').slideDown(function() {
                            $(this).parent('li').addClass('active');
                        });
            }
            else {
                $(this).children('ul.drop').slideDown(function() {
                    $(this).parent('li').addClass('active');
                });
            }
        });

编辑:我不知道如何在单击的下拉动画打开之前关闭打开的下拉动画。 JsFiddle:http://jsfiddle.net/JG9dB/

Answer 1

这就是我要解决的问题......

JavaScript:

$('ul.primary>li').click(function(event) {
  var li = $(this);
  var liOld = $('ul.active').parents("li");

  if($('ul.active').length!=0){
      $('ul.active').removeClass('active').slideUp('slow', function(){
        if(li.index() != liOld.index()){
           li.children('ul.drop').slideDown('slow').addClass('active');
        }
      });
  }
  else{
     $(this).children('ul.drop').slideDown('slow').addClass('active');
  }
});

演示: http://jsfiddle.net/JG9dB/35/

这应该可以解决这个问题。如果您还有其他问题，请告诉我!