Display sub menu with javascript
Question
I designed a menu for WordPress as follows:
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:
.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:
$('.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 answers
solution1
1 ACCPTED 2022-12-25 22:25:04
You should move the ul content you want to be toggleable into the clickable 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>
solution2
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:
.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
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:
<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:
.menu ul > li > ul {
display: none;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.