我的菜单溢出了空间答案

【问题标题】：my menu overflows the space我的菜单溢出了空间
【发布时间】：2013-02-16 03:47:42
【问题描述】：

我试图制作一个折叠早期扩展选择的菜单，但我无法使其工作。

var currentId;

$(document).ready(function () {
    $(":range").rangeinput({
        progress: true
    });

    /* Slide Toogle */
    $("ul.expmenu li > div.header").click(function () {
        var arrow = $(this).find("span.arrow");

        if (arrow.hasClass("up")) {
            arrow.removeClass("up");
            arrow.addClass("down");
        } else if (arrow.hasClass("down")) {
            arrow.removeClass("down");
            arrow.addClass("up");
        }

        $('#' + currentId).parent().find("ul.menu").slideToggle();
        $(this).parent().find("ul.menu").slideToggle();
        currentId = $(this).attr('id');
    });
});

您可以在这个地址找到主页：http://admin.dq.se/kramers/nyamenyer.html

所以如果我按“BIL”我希望“BIL”展开.. 然后如果我按“MC”我希望 BIL 折叠并 MC 展开。感谢您的帮助！

【问题讨论】：

除了“我不能让它工作”之外，您能更具体地解释一下有什么问题吗？

标签： javascript jquery css menu collapse

【解决方案1】：

在向下滑动之前向上滑动所有内容

$("ul.expmenu li > div.header").click(function () {

 $(this).parent().siblings().find('ul.menu').slideUp();
 $(this).parent().siblings().find('span.arrow').removeClass('up').addClass('down');

....

});

【讨论】：

唯一的问题是如果用户点击一个已经展开的菜单的箭头，菜单会立即上下滑动。用户体验方面有点尴尬。
而且它创建了很多额外的函数调用。
是的，我可以看到那里的箭头问题 =)
上滑后添加这个 $(this).parent().siblings().find('span.arrow').removeClass('up').addClass('down');
@Anton - 是的，这行得通。我唯一的个人小问题是，每次单击标题时它都会尝试上滑。如果它已经启动，那么它是一个额外的循环。不是很大的浪费，但仍然不需要。我添加了一个解决方案，其中 slideUp 位于 if 语句中，从而避免了这种情况。

【解决方案2】：

这不太对：

$(this).parent().find("ul.menu").slideToggle();

你需要爬得更高：

$(this).closest('ul.expmenu').find("ul.menu").slideToggle();

【讨论】：

【解决方案3】：

我会做这样的事情：

    /* Slide Toogle */
    $("ul.expmenu li > div.header").click(function () {
    var arrow = $(this).find("span.arrow");

    if (arrow.hasClass("up")) {
        arrow.removeClass("up");
        arrow.addClass("down");
    } else if (arrow.hasClass("down")) {
        $('.arrow.up.').parents('li').children('ul.menu').slideUp();
        $('.arrow.up.').removeClass('up').addClass('down');
        arrow.removeClass("down");
        arrow.addClass("up");
    }

这基本上是在寻找任何“向上”箭头，并将其菜单向上（注意 DOM 遍历），仅在相关箭头仍然“向下”的情况下。

【讨论】：