2

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

  1. 如果下拉菜单全部隐藏 - 动画高度
  2. 如果任何一个下拉菜单可见 - 显示/隐藏以在菜单之间切换

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

我首先尝试使用事件来执行此操作，即 click() 按钮和 if() all :hidden，然后执行此操作... click() 按钮和 if() :visible，然后执行其他操作。但这不起作用，菜单刚刚打开并立即关闭（我认为是因为两个 .click() 事件都是背靠背发生的，因为它同时识别了我的 if 语句？不确定。）

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

http://jsfiddle.net/U3jHf/31/

不工作...

这是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');

        }); 
    }

};

如果我必须澄清上述内容，请告诉我。但希望我的小提琴和 jQuery 代码能帮助你们进一步理解我想要做什么。

非常感谢任何和所有帮助。谢谢！

4

1 回答 1

2

我不会按照你提议的方式做事。维护所有这些单独的事件处理程序将是一件痛苦的事情。相反，使用导航上的数据属性和 jQuery 的data方法来检索它。这将让您以编程方式选择正确的侧边栏，而无需单独的处理程序。

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

  1. 目前没有打开菜单。动画进去。
  2. 菜单当前打开。隐藏当前菜单。显示新菜单。
  3. 再次单击相同的菜单。动画出来。

我放弃了您的 html/css 模板，因为它不包含可使用的功能元素，而且我不想在问题的非 js 部分浪费时间。代码仍然可以清理一下。我变得懒惰并在那里留下了一个foo。但这应该足以让您从中获得一个有效的、强大的解决方案。

http://jsfiddle.net/wSFED/4/

$('.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');


});
于 2013-01-26T05:58:21.220 回答