基于“点击”而非悬停的多级菜单导航答案

【问题标题】：Multilevel menu navigation based on 'click' and not hover基于“点击”而非悬停的多级菜单导航
【发布时间】：2011-01-14 09:59:10
【问题描述】：

我没有遇到基于单击打开子菜单的多级菜单，因为大多数现有菜单都使用悬停效果。谁能指出我在哪里可以找到教程？我已经准备好所有标签，但不知道如何利用 jquery 使其作为正常的多级菜单工作。提前致谢

<ul id="suckertree1">

<li><a href='javascript:void(0)' target='_top'>Another child asd asd asd asd ad adas dasfe a sde fea rea</a>
    <ul class=''>
        <li><a href='http://localhost/private/product/40' target='_top'>cceeeeeooo</a></li>
        <li><a href='http://localhost/private/product/13' target='_top'>child of</a></li>
        <li><a href='javascript:void(0)' target='_top'>eawaa 5</a>
            <ul class=''>
                <li><a href='http://localhost/private/product/19' target='_top'>cccc</a></li>
            </ul>
        </li>
        <li><a href='http://localhost/private/product/14' target='_top'>errrr</a></li>
        <li><a href='http://localhost/private/product/2' target='_top'>jonni</a></li>
        <li><a href='http://localhost/private/product/29' target='_top'>Lumpur</a></li>
        <li><a href='http://localhost/private/product/41' target='_top'>makemefeel</a></li>
        <li><a href='http://localhost/private/product/16' target='_top'>sadsadsa</a></li>
    </ul>
</li>
</ul>

【问题讨论】：

不想剧透，但我很好奇为什么“悬停”方法不适合您的需要？

标签： jquery

【解决方案1】：

不知道教程，但here is an example。非常快 - 相当脏，但我希望它能让你走上正轨。我包含<span />s 的原因是您仍然可以访问顶级链接。它还用于提供视觉提示。

根据您的设计，您可能需要包含一些代码，以便在您单击文档的其他位置时隐藏下拉菜单。

希望对你有帮助

【讨论】：

你好，很酷的脚本，但是这个菜单不止一层。最低为4级。如果有一个对我来说，下滑将不是问题。我只能想到使用 each() 但杰米向我展示了另一种选择。试图整合，但仍在努力。感谢您的努力
别担心！如果您有兴趣，我在示例中添加了更多级别 - 可能有助于充实一些内容:) jsbin.com/isezi3/4
嘿，inrbob。我刚看到你的剧本。按我想要的方式工作。生病尝试看看我是否能够集成到我的代码中。非常感谢！这个脚本被卡了 2-3 天 =)
完全不用担心！ :) 如果您需要更多帮助/建议将其与您的网站集成，请询问。使用您拥有的内容设置演示并在此处链接到它可能会有所帮助，但不一定。 jsfiddle.net 很好，如果您包含并使用 css。让我知道结果如何！
hi inrbob 工作得非常出色~非常感谢。将检查链接 jsfiddle.net。它似乎是一个实时编辑器来浏览器的东西。非常感谢 inrbob。

【解决方案2】：

你应该能够做一些非常简单的事情，你可以根据记忆使用 .toggle();像这样：

$('.navigation-item').click(function() {
    $('.sub-navigation-item').toggle();
});

我相信它应该自己显示/隐藏。否则，您实际上可以执行与悬停完全相同的操作，但将其替换为单击功能：

$('.navigation-item').click(function() {
    if ($(this).hasClass('expanded')) {
        $(this).find('.sub-nav-container').slideUp();
        $(this).removeClass('expanded');
    }
    else {
        $(this).find('.sub-nav-container').slideDown();
        $(this).addClass('expanded');
    }
});

我在那里使用了一个 if 语句来解决这样一个事实，即对于悬停，您可以传入 2 个函数，一个用于悬停，一个用于悬停 - 您不能使用 click 函数执行此操作，因此这是一种快速的方法绕过它:)。

编辑：

在上面的代码的情况下，尝试类似的方法，只是为了确保它会在自身内部查找并找到第一个 ul，但不会进一步向下层级？对于多级支持，即：

$('li a').click(function() {
    if ($(this).hasClass('expanded')) {
        $(this).parent().find('ul:first').hide();
        $(this).removeClass('expanded');
    }
    else {
        $('#suckertree1 ul').hide();
        $(this).parent().find('ul:first').show();
        $(this).addClass('expanded');
    }        
});

我认为 jQuery UI 也可能具有与此类似的内置功能 - 如果您仍然处于迷茫状态，请给它一个谷歌 :)。

【讨论】：

嗨，杰米，感谢您的快速回复。我正在使用可见性：无。这是否意味着您的方法适用于显示：无？
完全不用担心 - slideUp 和 slideDown 应该像 .show() 和 .hide() 一样自动显示/隐藏内容。
jamie，我已经编辑了问题并发布了代码示例。如果我使用 find 的问题，会有很多 UL 投票要切换仪式？
看起来可见性不适用于显示或切换。编辑到这个 css()。您的方法仅适用于第一级。一旦我在第二级，我点击，第三级是可见的，但是第二级消失了。有什么想法吗？
嘿杰米，如果我错了，请纠正我，find() 是找到它的后代，对吗？在这种情况下，您编辑的解决方案将无法这样做，因为 ul 不会落入 $("li a) ...

【解决方案3】：

尽管两年前有人问过这个问题，但我认为我可以提供帮助。在接受的答案下的 cmets 部分中找到的工作代码有一个缺陷：当您深入到任何级别时，链接将不起作用，因为所有 <a> 后面的标签或任何 <li> 中的 expandable 类都是在e.PreventDefault() 函数的范围内。这基本上意味着所有这些。

因此，需要稍微修复一下，仅影响类为 expandable 的 <li> 标记的直接后代的链接标记。修复方法是在点击函数的第一行添加一个后代选择器：$('.nav-menu li.expandable > a').click(function (e) {

这是工作 jsfiddle 的链接：http://jsfiddle.net/disinfor/7jGj8/1/

*顺便说一句，我还添加了一堆类来真正显示菜单的层次结构（例如，儿童、孙子、曾孙等）

【讨论】：