1

所以，我有一个简单的菜单：当你点击一个时显示一个项目，当你点击两个时显示两个项目。ONE 和 TWO 具有切换功能，因此它们在单击时会向下和向上滑动，但是当我在不关闭 ONE 的情况下切换 TWO 时，事情会变得一团糟。

$(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/

4

2 回答 2

2

你可以试试这个

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

演示。

更新 ：

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

演示。

于 2013-02-25T00:57:31.723 回答
1

要解决此问题，您需要以编程方式触发任何已打开的列表项的切换。

最简单的方法是在显示刚刚单击的菜单的 div 之前添加代码以隐藏所有 div。

例如编辑函数，使其显示为：

$li.toggle(function() {

  $('div.submenu:visible').parent('li.sub').click();

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

},

此解决方案假定您可能希望拥有两个以上的列表项，并且可以针对任何数量进行缩放。如果您知道您将只有两个列表项，您可以直接调用列表项。

于 2013-02-25T00:06:33.007 回答