Question

我有一个jQuery驱动的CSS3菜单系统，我从这里得到（http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/）我正在使用这个令人印象深刻的菜单作为我的网站导航的一部分，但我遇到了一个问题，我想显示更多其中一个菜单，因为我有很多链接。

jQuery代码如下（注意＃dl-menu2显示我使用的是两个菜单而不是一个）

        <script>
        $(function() {
            $( '#dl-menu' ).dlmenu({
                animationClasses : { classin : 'dl-animate-in-2', classout : 'dl-animate-out-2' }
            });
                    $( '#dl-menu2' ).dlmenu({
                animationClasses : { classin : 'dl-animate-in-2', classout : 'dl-animate-out-2' }
            });
        });
    </script>

我的问题是如何在菜单2打开时关闭菜单1？单击菜单1时，菜单会打开，但在单击菜单2时不会关闭。

Answer 1

dlmenu代码很有趣，一旦初始化，你可以再次使用字符串调用它来执行该函数。因此，您可以将index.html从git存储库（here）更改为通过将$(function(){...}更改为：

来自动打开菜单

$(function() {
    $('#dl-menu').dlmenu();
    $('#dl-menu').dlmenu("openMenu");
});

您也可以使用上述功能关闭菜单。但是我找不到任何机制来向dlmenu代码添加监听器。

所以最好的解决方案是添加自己的解决方案并使用以下内容：

    $('#dl-menu').dlmenu("closeMenu");

'#dl-menu'是对菜单div的ID的引用，因此您可以通过ID指定要关闭的菜单。

棘手的部分是在单击其他菜单时触发侦听器。由于dlmenu中的逻辑正在清除并且每当打开菜单时设置点击$（正文），这很复杂。最简单的方法是在按钮上添加id。 index.html中的当前逻辑是：

<button class="dl-trigger">Open Menu</button>

它没有ID，因此为您定义的每个菜单添加一个：

<button id="dl-menu1-button" class="dl-trigger">Open Menu</button>

然后，您可以更改$(function() {...}以执行以下操作（假设您添加了另一个菜单并更改了ID，以便您拥有dl-menu1和dl-menu2）：

$(function() {
    $('#dl-menu1').dlmenu();
    $('#dl-menu2').dlmenu();

    $('#dl-menu1-button').on("click", function() {
        $('#dl-menu2').dlmenu("closeMenu");
    });
    $('#dl-menu2-button').on("click", function() {
        $('#dl-menu1').dlmenu("closeMenu");
    });
});

我通过获取git存储库的克隆，添加id并更改上面的init来测试上述内容。按照你的要求工作。

jQuery菜单管理（功能） - 打开和关闭

1 个答案: