Javascript toggle（）子问题

我遇到了一个问题，当在

.mini-nav-li

中单击时，我的jQuery将切换，而不仅仅是

.nav-ul-li

。解决此问题的最佳方法是什么

HTML:

jQuery：

$('.nav ul > li:first-child').on('click', function() {
    $('ul.mini-nav').toggle();
});

---

单击“内部

li

”时，需要停止事件传播，以便事件不会冒泡到处理它的外部列表，切换内部列表：

$('.nav > ul > li:first-child').on('click', function () {
    $('ul.mini-nav').toggle();
});

$('ul.mini-nav').on('click', function (e) {
    e.stopPropagation();
});

演示： 还请注意，我对选择器做了一些修改

.nav > ul > li:first-child
     ^-- here

---

还有一件事：在

li

之后删除

。如果要在下一行渲染它们，则需要生成

li

块，而不是

inline块。
需要吗？@C-linkNepal-Lol，很好。它不起作用。当我单击任何其他选项时，它会再次隐藏菜单。你错了。
$('.nav > ul > li:first-child').on('click', function () {
    $('ul.mini-nav').toggle();
});

$('ul.mini-nav').on('click', function (e) {
    e.stopPropagation();
});

.nav > ul > li:first-child
     ^-- here