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

I am trying to make a submenu using jQuery. The idea is that when someone clicks on the first menu a submenu appears, then when someone clicks the submenu it disappears and shows a div with information but I cant make it work properly.

我正在尝试使用jQuery创建一个子菜单。这个想法是,当有人点击第一个菜单时会出现一个子菜单,然后当有人点击子菜单时它会消失并显示一个包含信息的div,但我无法使其正常工作。

Here is my HTML:

这是我的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>

And this is my jQuery:

这是我的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();
    });
});

The idea is simple, if menu is clicked all the content divs must hide and the submenu must toggle (show if hidden, hide if shown.) When a submenu item is clicked, the submenu must hide and the content div matching the data attribute clicked must appear.

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

But, when I click the submenu item it shows the content for a moment then it disappears. Any idea on what I am doing wrong?

但是,当我单击子菜单项时,它会暂时显示内容,然后它就会消失。对我做错了什么的想法?

Here is the fiddle: https://jsfiddle.net/yab34zdw/

这是小提琴:https://jsfiddle.net/yab34zdw/

2 个解决方案

#1

When you click on a submenu item, both of those event handlers are being fired. The problem is with your selectors:

单击子菜单项时,将触发这两个事件处理程序。问题出在您的选择器上:

$('#menu li ') also captures the submenu items, which are also <li> tags that are descendants of the menu. You could just change the selector to $("#menu > li"), which captures only direct descendants (children), but I think in general its just better to add classes, and use simpler selectors.

$('#menu 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;
});

#2

I'm not sure if I got what you're going for but play around with this little tweak to see if it's closer to what you describe. I think both click functions were targeting your submenu content.

我不确定我是否得到了你想要的东西但是玩这个小调整来看看它是否更接近你描述的内容。我认为这两个点击功能都针对您的子菜单内容。

$(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>

#1