0

我有一个 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 时不会关闭。

4

1 回答 1

2

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

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

您也可以使用上述方法关闭菜单。但是我找不到将侦听器添加到 dlmenu 代码的任何机制。

因此，最好的解决方案是添加您自己的并利用以下内容：

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

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

棘手的部分是在单击另一个菜单时触发侦听器。由于 dlmenu 中的逻辑在打开菜单时清除并设置对 $(body) 的单击，因此这很复杂。最简单的方法是为按钮添加一个 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-menu1and 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 来测试上述内容。按照你的要求工作。

于 2013-07-16T09:55:44.323 回答