Question

我没有遇到基于点击打开子菜单的多级菜单，因为大多数存在的菜单都在使用悬停效果。谁能指出我在哪里可以找到教程？我已准备好所有标签，但不知道如何利用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>

Answer 1

你应该能够做一些非常简单的交配，从你可以使用的内存.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也可能有类似于内置的东西 - 如果你仍处于失败状态，请给它一个google：）。

Answer 2

不知道教程，here is an example。很快 - 相当脏，但我希望它会让你走上正轨。我加入<span />的原因是您仍然可以按照顶级链接进行操作。它还用于提供视觉提示。

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

希望这有帮助

Answer 3

虽然这是在两年前提出来的，但我认为我可以提供帮助。在接受的答案下的评论部分中找到的工作代码有一个缺陷：链接将无法在您向下钻取到任何级别时起作用，因为所有<a>标记跟随或在任何<li>中具有类别expandable属于e.PreventDefault()函数的范围。这基本上意味着所有这些。

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

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

*另外，我还添加了一些类来真正显示菜单的层次结构（例如，儿童，孙子，曾孙子等）

基于“点击”而不是悬停的多级菜单导航

3 个答案: