无法使用jQuery从菜单显示内容文本

Question

我将尝试使用jQuery创建子菜单。当用户点击第一个菜单时，子菜单会出现；当用户再次点击子菜单时，它会消失并显示包含信息的div，但我无法使其正常工作。

以下是我的HTML代码：

<ul id="menu">
    <li>
        <a href="#">Item 1</a>
        <ul id="submenu">
            <li><a href="#" data-menu="show1">Sub menu 1</a></li>
            <li><a href="#" data-menu="show2">Sub menu 2</a></li>
        </ul>
    </li>
</ul>
<div id="show1" class="content">Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. </div>
<div id="show2" class="content">Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri </div>

这是我的jQuery代码:

$(document).ready(function () {
    $('#menu li ').click(function () {
        $('#submenu').fadeToggle();
        $('.content').fadeOut();
    });
    $('ul#submenu li a').click(function () {
        var menu = $(this).data("menu");
        $('#' + menu).fadeIn();
    });
});

这个想法很简单，如果菜单被点击，所有内容div都必须隐藏，子菜单必须切换（如果是隐藏状态则显示，否则隐藏）。当点击子菜单项时，子菜单必须隐藏，并且与所点击的数据属性匹配的内容div必须出现。

但是，当我点击子菜单项时，它会显示内容片刻，然后就消失了。你知道我做错了什么吗？

这是fiddle链接: https://jsfiddle.net/yab34zdw/

- Chico3001

---

你的HTML中.content在哪里？ - Barmar

Answer 1

当您单击子菜单项时，这两个事件处理程序都会被触发。问题出在您的选择器上： $('#menu li')也捕获了子菜单项，它们也是菜单的后代<li>标签。您可以将选择器更改为$("#menu > li")，它仅捕获直接后代（子级），但我认为通常最好添加类并使用更简单的选择器。

HTML

<ul id="menu">
    <li class="menu-top-item>
        <a class="menu-top-item-link" href="#">Item 1</a>
        <ul id="submenu">
            <li class="menu-sub-item">
                <a class="menu-sub-item-link" href="#" data-menu="show1">Sub menu 1</a>
            </li>
            <li class="menu-sub-item">
                <a class="menu-sub-item-link" href="#" data-menu="show2">Sub menu 2</a>
            </li>
        </ul>
    </li>
</ul>

Javascript Fiddle

$('.menu-top-item-link').click(function () {
    $('#submenu').fadeToggle();
    $('.content').fadeOut();
    return false;
});
$('.menu-sub-item-link').click(function () {
    var menu = $(this).data("menu");
    $('#' + menu).fadeIn();
    return false;
});

- Will Reese

---

子菜单项是菜单的后代，而不是子元素。 - Barmar

它不起作用，它完全相同，显示内容片刻后就消失了... - Chico3001

@Chico3001 抱歉，我刚刚注意到其中一个选择器仍然指向了<li>，而应该指向<a>。我已经进行了编辑并添加了一个Fiddle。 - Will Reese

谢谢...缺少了返回false，这就是问题所在，你有没有任何解释为什么的链接？非常感谢。 - Chico3001

return false 不是问题所在。如果你从 fiddle 中删除它，它仍然会以同样的方式运行。问题在于我将顶部菜单链接指向了包含所有内容的 <li>。点击子菜单项仍然在顶部的 <li> 内，因此两个处理程序仍然会触发。return false 在这里用于取消 <a> 应该正常触发的导航。如果你在链接的点击处理程序中返回 false，则会阻止链接将浏览器导航到其目标。在你的情况下，仍然是同一页，但它会防止将哈希添加到你的 URL 中。 - Will Reese

Answer 2

我不确定你的意思，但是尝试一下这个小调整，看看是否更接近你所描述的。我认为两个点击函数都在针对你的子菜单内容。

$(document).ready(function () {
    $('#menu .menu ').click(function () {
        $('#submenu').fadeToggle();
        $('.content').fadeOut();
    });
    $('ul#submenu li a').click(function () {
        var menu = $(this).data("menu");
        $('#' + menu).fadeToggle();
    });
})

<ul id="menu">
    <li>
        <a href="#" class="menu">Item 1</a>
        <ul id="submenu">
            <li><a href="#" data-menu="show1">Sub menu 1</a></li>
            <li><a href="#" data-menu="show2">Sub menu 2</a></li>
        </ul>
    </li>
</ul>
<div id="show1" class="content">Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. </div>
<div id="show2" class="content">Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri </div>

- Kerning1