点击时的jQuery下拉列表

问题描述：

因此，我有一个简单的菜单:当您单击一个时，将显示一个项目，当您单击两个时，将显示两个项目. ONE和TWO具有切换功能，因此单击时它们会上下滑动，但是当我在不关闭ONE的情况下切换两个时，事情就会变得混乱.

So, I have a simple menu: when you click on ONE shows the ONE ITEMS, when you click on TWO shows the TWO ITEMS. The ONE and TWO have a toggle function, so they slides down and up on click, but when i toggle TWO without closing ONE, things get messy.

$(function() {

$('li.sub', '#navigation').each(function() {

var $li = $(this);
var $div = $('div.submenu', $li);
var top = $li.height();

$li.toggle(function() {

  $div.css('top', top).
  slideDown('slow');

},

function() {

  $div.
  slideUp('slow');

  });

 });

});

小提琴: http://jsfiddle.net/vGSWm/2/

答

您可以尝试

$(function() {
    $('#navigation li.sub').click(function(e) {
        var el = $(this).find('.submenu');
        $('.submenu').not(el).slideUp(function(){
            el.slideToggle();
        });
    });
});

DEMO.

更新:

$(function() {
    $('#navigation li.sub').click(function(e) {
        var el = $(this).find('.submenu');
        if(el.hasClass('open'))
        {
            el.slideUp(function(){
                el.removeClass('open');
            });
        }
        else
        {
            var opened = $('.submenu.open');
            if(opened.length)
            {
                opened.slideUp(function(){
                    opened.removeClass('open');
                    el.slideToggle(function(){
                        el.addClass('open');
                    });
                })
            }
            else
            {
                el.slideToggle(function(){
                    el.addClass('open');
                });
            }
        }
    });
});

演示 .

相关推荐