在制作另一个动画之前关闭打开的菜单

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/

这应该可以解决问题。如果您有任何其他问题，请告诉我！