jQuery - 在 li 中切换 ul

Question

我正在编辑菜单。

这是我的代码片段：

 $('.menu-toggle').click(function () { $(this).children('.sub-menu').slideToggle('slow'); })

 a { text-decoration: none; color: white; } li { display: table; width: 100%; height: 5em; } li.menu-toggle { background-image: linear-gradient(0deg, red 1%, green 100%); background-color: red; } .menu-toggle ul { position: relative; } .menu-toggle ul li{ background-color: blue; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <li class="menu-toggle">Toggle <ul class="sub-menu"> <li><a href="#">Click here</a></li> <li><a href="#">Click here</a></li> </ul> </li>

如何在第一个 li 下切换ul ？ 现在菜单在第一个（可点击的） li 。 我希望可点击元素始终高于扩展值（典型菜单）。

我尝试了不同的切换组合，但不幸的是结果总是一样的。

Answer 1

您需要阻止子菜单事件冒泡到父元素。 https://api.jquery.com/event.stoppropagation/

$('.sub-menu').on('click', function(e) {
   e.stopPropagation()
})

Answer 2

而不是$(this)使用$(e.target).children('.sub-menu').slideToggle('slow');

试试这个：

 $('.menu-toggle').click(function (e) { $(e.target).children('.sub-menu').slideToggle('slow'); })

 a { text-decoration: none; color: white; } li { display: table; width: 100%; height: 5em; } li.menu-toggle { background-image: linear-gradient(0deg, red 1%, green 100%); background-color: red; } .menu-toggle ul { position: relative; } .menu-toggle ul li { background-color: blue; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <li class="menu-toggle"> Toggle <ul class="sub-menu"> <li><a href="#">Click here</a></li> <li><a href="#">Click here</a></li> </ul> </li>

根据 OP 的评论更新

您希望父元素（蓝色li ）放在ul标签的顶部。 所以把ul标签放在li旁边（这里最好用div代替li ）。

对于您的 jQuery 部分，请使用$(e.target).next().slideToggle('slow');

 $('.menu-toggle').click(function (e) { $(e.target).next().slideToggle('slow'); })

 a { text-decoration: none; color: white; } li { display: table; width: 100%; height: 5em; } li.menu-toggle { background-image: linear-gradient(0deg, red 1%, green 100%); background-color: red; } ul li { background-color: blue; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <li class="menu-toggle"> Toggle </li> <ul class="sub-menu"> <li><a href="#">Click here</a></li> <li><a href="#">Click here</a></li> </ul>