无法使用 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();
    });
});

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

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

这里是fiddle：https://jsfiddle.net/yab34zdw/

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;
});

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>

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

Can't show content text from menu using jQuery

html

javascript

css

jquery

menu