使用 javascript 显示子菜单
[英]Display sub menu with javascript
问题描述
I designed a menu for WordPress as follows:
我为WordPress设计了一个菜单如下：
HTML: HTML：
<aside class="menu">
<ul>
<li>
Main
<ul>
<li>
**** Under the first menu ****
<li>
Content first
</li>
<li>
Content second
</li>
<li>
Content third
<ul>
<li>
**** Under the second menu ****
<li>
Content first
</li>
<li>
Content second
</li>
<li>
Content third
</li>
</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
<aside>
CSS: CSS：
.menu > ul > li > ul {
display: none;
}
And using this script code, I have defined a condition that by clicking on li, if there is ul in it, it will be displayed:并且使用这个脚本代码，我定义了一个条件，通过点击li，如果里面有ul，就会显示：
$('.menu').find('li').click(function(evt) {
evt.stopPropagation();
$(this).children('ul').toggle();
});
This code works fine;这段代码工作正常； But when several other li are used inside the li, the condition I put will no longer work and only the first sub-menu will be displayed.但是当里里面用到其他几个里的时候，我放的条件就不行了，只会显示第一个子菜单。
Is there a way to make my script code work properly?有没有办法让我的脚本代码正常工作？
My problem is only related to the script code.我的问题只与脚本代码有关。
2 个解决方案
解决方案1
1 已采纳 2022-12-25 22:25:04
You should move the ul content you want to be toggleable into the clickable li:您应该将要切换的 ul 内容移动到可点击的 li 中：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.menu ul li ul {
display: none;
}
</style>
</head>
<body>
<div id="app"></div>
<aside class="menu">
<ul>
<li>
Main
<ul>
<li>
**** Under the first menu ****
<li>
Content first
</li>
<li>
Content second
</li>
<li>
Content third
<ul>
<li>
**** Under the second menu ****
<li>
Content first
</li>
<li>
Content second
</li>
<li>
Content third
</li>
</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
<aside>
</body>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"
></script>
<script >
$('.menu').find('li').click(function(evt) {
evt.stopPropagation();
$(this).children('ul').toggle();
});
</script>
</html>
解决方案2
0 2022-12-25 16:04:24
If you want to just have the 2nd level of the menu visible after opening, you need to do your CSS like this:如果您只想在打开后看到第二级菜单，您需要像这样执行 CSS：
.menu > ul > li > ul {
display: none;
}
This way you will be selecting direct children of the elemen, more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator通过这种方式，您将选择元素的直接子元素，更多信息请参见：https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator
However, if you also want for the 2nd level of menu to be open on click, you need to move your <ul> and put it directly with your <li> , like this:但是，如果您还希望在单击时打开第二级菜单，则需要移动<ul>并将其直接放在<li>中，如下所示：
<aside class="menu">
<ul>
<li>
Main
<ul>
<li>
**** Under the first menu ****
<li>
Content first
</li>
<li>
Content second
</li>
<li>
Content third
<ul>
<li>
**** Under the second menu ****
<li>
Content first
</li>
<li>
Content second
</li>
<li>
Content third
</li>
</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
</aside>
and change your CSS to this:并将您的 CSS 更改为：
.menu ul > li > ul {
display: none;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.