Question

出于某种原因，我无法让jQuery菜单同时崩溃和隐藏。个别要求折叠或隐藏菜单工作，而不是同时进行。

要折叠菜单，请使用$(menu).menu("collapseAll", null, true) $(menu).hide()来说明{/ 3}}。

为了隐藏菜单，我打电话给{{1}}，没什么特别的。这是the jQuery documentation。

这里是the documentation。选择一个菜单选项，然后单击＆＃34;显示菜单＆＃34;按钮。在此示例中，菜单显示并在大约半秒后折叠。最终，此菜单将用于我的代码的许多地方，因此在首次出现后向用户显示菜单时，菜单不会扩展到最后一个菜单页面，这一点非常重要。

Answer 1

当您单击某个项目时，此菜单看起来有内置超时，当您单击项目时，您可以看到此菜单，菜单不会立即崩溃。它会立即隐藏，因为您拥有.hide()并立即执行。

我能做你想做的唯一方法是

http://jsfiddle.net/u2v2x049/7/

$(function () {
    var menu = $("#menu");

    menu.menu({
        select: function (event, ui) {
            $(this).menu("collapseAll", null, true);
            setTimeout(function () {
                menu.hide();
            }, 500);
        }
    });

    $("button").click(function (event) {
        menu.show();
    });
});

所以它折叠了所有这些然后我在500毫秒后隐藏菜单。如果你愿意，你可以把它变成400。我的猜测是菜单可能会检查其可见性，如果它不可见，那么它不会正确折叠。我真的没有使用这个UI，这就是我能为你提供的全部内容。

实际上300毫秒似乎是完美的时机，http://jsfiddle.net/u2v2x049/8/

Answer 2

collapse-all 方法无法满足您的期望：

指示是应关闭所有子菜单还是仅关闭下面的子菜单，包括包含触发事件目标的菜单。

因此，它只是用于打开/关闭子菜单 - 而不是整个菜单结构。相反，您可以将每个菜单结构包含在DIV中：

（1）将overflow:hidden;放在包含div上，

（2）使用jQuery为div的高度设置动画

请改为尝试：

$('container_DIV').animate({
    height: '0px'
},800);

这是一个带有完整演示的jsFiddle：

http://jsfiddle.net/73jgv60a/

在小提琴中，请注意动画完成后菜单会从屏幕上消失。这是因为两个菜单结构都向左浮动，当第一个菜单结构的高度变为零时，另一个菜单结构只是移动到它的位置。为了防止这种情况，如果需要，将外部容器包装在另一个保留页面空间的DIV中。

菜单页实际上是打开的，但你看不到它们，因为DIV对主菜单很紧张，并且有overflow:hidden;。

首先，我计划将.css('overflow','hidden or visible')链接到每个切换功能，但事实证明似乎不需要overflow:hidden。

Revised jsFiddle Demo

折叠所有菜单并同时隐藏它们？

2 个答案: