Implement a three-level drop-down menu based on jquery,
This article provides examples to share the implementation code of the jquery three-level drop-down menu for your reference. The details are as follows:
When writing this, we must first follow the train of thought. When you click a menu, the other items must be closed. When you click a menu, the second and third-level menus must be closed.
The Code is as follows:
<Body> <aside> <ul class = "one"> <li> <a href = "#" class = "a"> directory A </a> <ul class = "two" style = "display: none "> <li> <a href =" # "class =" a "> Level 2 Directory A </a> <ul class =" three "style =" display: none "> <li> <a href =" # "> Level 3 directory A </a> </li> </ul> </li> <a href = "#" class = "a"> Level 2 Directory B </a> </li> <a href = "#" class = "a"> Level 2 directory C </a> </li> </ul> </li> <a href = "#" class = "a"> directory B </a> <ul class = "two" style = "display: none "> <li> <a href =" # "class =" a "> Level 2 Directory A </a> <ul class =" three "style =" display: none "> <li> <a href =" # "> Level 3 directory A </a> </li> </ul> </li> <a href = "#" class = "a"> Level 2 Directory B </a> </li> <a href = "#" class = "a"> Level 2 directory C </a> </li> </ul> </li> <a href = "#" class = "a"> directory C </a> </li> </ul> </aside> // jQuery part <script src = "js/jquery-1.8.3.min.js"> </script> <script> $ (document ). ready (function () {$ ('. A '). click (function () {if (%(this%.siblings('ul'%.css ('display') = 'None') {$ (this ). siblings ('ul '). slideDown (100 ). children ('lil'); if (%(this%.parents('li'%.siblings('li'%.children('ul'%.css ('display') = 'block') {$ (this ). parents ('lil '). siblings ('lil '). children ('ul '). slideUp (100) ;}} else {// hide the sub-menu under the control menu $ (this ). siblings ('ul '). slideUp (100); // hide the sub-menu under the control menu $ (this ). siblings ('ul '). children ('lil '). children ('ul '). slideUp (100) ;}}) ;}</script> </body>
If you want to add a style, pay attention to it. Otherwise, the menu may be incorrect.
Full Code address: https://github.com/SabrinaTian/ThreeMenuNav.git
In git, there is also a case with an icon. If you do not click it, it is a plus sign. After the menu is opened, it becomes a minus sign.
The above is all the content of this article, hoping to help you learn.