jqueryif语句-它可以先执行（或者必须在事件之后执行）吗？

我正在努力让它工作。我正在创建一系列可点击的按钮，用于下拉菜单。我希望它能按如下方式工作：

如果下拉菜单全部隐藏-设置高度动画

如果任何一个下拉菜单可见-显示/隐藏以在菜单之间切换

在两种情况下，当一个新下拉菜单的动画相同时，我可以做得很好。然而，这不是我想要的样子。我真的很想“切换”的显示/隐藏时，已经打开和动画的高度时，第一次打开（以及一旦关闭备份）。由于我可能会更进一步，在初始打开和关闭时启用向下/向上拖动，并在打开下拉菜单后向左/向右滑动以在下拉菜单之间切换，这是需要为每个场景分别设置动画的另一个原因

我试着先用事件来做，即单击（）按钮，然后单击if（）all:hidden，然后执行此操作。。。单击（）按钮，如果（）可见，则执行其他操作。但这不起作用，菜单只是打开并立即关闭（我想是因为这两个.click（）事件是背靠背发生的，因为它同时识别我的if语句？不确定）

下一次尝试，也就是我在下面所做的，是尝试将每个.click（）封装在它自己的if语句中，以分别定义它们。但正如你从下面的小提琴中看到的：

不起作用

以下是jQuery：

//sideUI drop down

if( $('#sideUIContainer').is(':hidden') && $('#sideUISearchContainer').is(':hidden') && $('#sideUIActionContainer').is(':hidden') ){

    $('#navNavigate').click(function(){

            $('#sideUIContainer').show();       
            $('#sideUIContainer, #sideUISearchContainer, #sideUIActionContainer').animate({'height':'504px'});          
            $('#navNavigate').addClass('active');

    }

    $('#navSearch').click(function(){

            $('#sideUISearchContainer').show();     
            $('#sideUIContainer, #sideUISearchContainer, #sideUIActionContainer').animate({'height':'504px'});          
            $('#navSearch').addClass('active');

    }

    $('#navAction').click(function(){

            $('#sideUIActionContainer').show();     
            $('#sideUIContainer, #sideUISearchContainer, #sideUIActionContainer').animate({'height':'504px'});          
            $('#navAction').addClass('active');

    }

};

// toggle drop down when UI open - menu

if($('#sideUIContainer').is(':visible')){

    $('#navNavigate').click(function(){

        $('#sideUIContainer, #sideUISearchContainer, #sideUIActionContainer').animate({'height':'0'}, function(){

            $('#sideUIContainer').hide();
            $('#navNavigate').removeClass('active');

        }); 
    }

    $('#navSearch').click(function(){

        $('#sideUIContainer').hide();
        $('#navNavigate').removeClass('active');

        $('#sideUISearchContainer').show();
        $('#navSearch').addClass('active');

    }); 


    $('#navAction').click(function(){

        $('#sideUIContainer').hide();
        $('#navNavigate').removeClass('active');

        $('#sideUIActionContainer').show();
        $('#navAction').addClass('active');

    }); 

};

// toggle drop down when UI open - search

if($('#sideUISearchContainer').is(':visible')){

    $('#navNavigate').click(function(){

        $('#sideUISearchContainer').hide();
        $('#navSearch').removeClass('active');

        $('#sideUINavigateContainer').show();
        $('#navNavigate').addClass('active');

    }); 

    $('#navSearch').click(function(){

        $('#sideUIContainer, #sideUISearchContainer, #sideUIActionContainer').animate({'height':'0'}, function(){

            $('#sideUISearchContainer').hide();
            $('#navSearch').removeClass('active');

        }); 
    }

    $('#navAction').click(function(){

        $('#sideUISearchContainer').hide();
        $('#navSearch').removeClass('active');

        $('#sideUIActionContainer').show();
        $('#navAction').addClass('active');

    }); 

};

// toggle drop down when UI open - action

if($('#sideUIActionContainer').is(':visible')){

    $('#navNavigate').click(function(){

        $('#sideUIActionContainer').hide();
        $('#navAction').removeClass('active');

        $('#sideUINavigateContainer').show();
        $('#navNavigate').addClass('active');

    }); 

    $('#navSearch').click(function(){

        $('#sideUIActionContainer').hide();
        $('#navSearch').removeClass('active');

        $('#sideUISearchContainer').show();
        $('#navSearch').addClass('active');

    }); 

    $('#navAction').click(function(){

        $('#sideUIContainer, #sideUISearchContainer, #sideUIActionContainer').animate({'height':'0'}, function(){

            $('#sideUIActionContainer').hide();
            $('#navAction').removeClass('active');

        }); 
    }

};

请让我知道，如果我必须澄清上述。但希望我的fiddle和jQuery代码能帮助你们进一步理解我要做的事情

---

非常感谢您的任何帮助。谢谢

我不会按照你提议的方式做事。维护所有这些独立的事件处理程序将是一件痛苦的事情。相反，在nav和jQuery的

data

方法上使用数据属性来检索它。这将允许您以编程方式选择正确的侧栏，而无需单独的处理程序

在处理程序中，您将向活动导航项添加一个“活动”类。然后检查该类以确定用户遇到的三种可能性中的哪一种

当前没有打开的菜单。在中设置动画

菜单当前打开。隐藏当前菜单。显示新菜单

再次单击相同的菜单。制作动画

我丢弃了你的html/css模板，因为它不包含可使用的功能元素，我不想在问题的非js部分浪费时间。代码仍然可以清理一点。我很懒，在那里留下了一个

foo

。但它应该足以让您从中获得一个有效、健壮的解决方案

---

您的标记没有内容？让我在每个标记中添加一些内容。所以你可以知道哪个菜单是哪个。很抱歉。但除此之外，内容在这里并不重要。。。为了方便这个下拉功能，我们刚刚在那里做了简单的标记。谢谢！那太完美了。我得好好研究一下，看看会发生什么。我的jQuery知识非常简单，所以我的方法有时不是最有效的。我真的很感谢你的帮助。

$('.nav').click( function() {
    debugger;
    var $this = $(this);

    //current menu has been clicked again
    if ($this.hasClass('active')) {
        //however you want to handle this. I collapsed it again
        var $foo = $('#' + $this.data('menu'));
        $foo.animate( {width:0}, 500);        
        $this.removeClass('active');
        return;
    }

    //another menu is already active
    var $active = $('.nav.active');
    if ($active.length) {
        //toggle current clicked item 
        var thismenu = $this.data('menu');
        var activemenu = $active.data('menu');
        var $thismenu = $('#' + thismenu);
        var $activemenu = $('#' + activemenu);

        //hide the old active menu and remove active class from nav
        $activemenu.css( {width:0} );
        $active.removeClass('active');

        //show the new menu and add active class to nav
        $thismenu.css( {width:300} );
        $this.addClass('active');
        return;
    }

    //no menu is active - animate menu in
    var $menu = $('#' + $this.data('menu'));
    $menu.animate( {width:300}, 500);
    $this.addClass('active');


});