Close the menu (click one to close other items), and close the menu.
1. The menu here is not only a menu bar, but also an article module.
2. Main effect: click one of them to close or expand yourself and close other expanded menus.
3. Advantages: less JavaScript code, easy to understand
Read the code.
HTML example (menu code, easy to copy, no line number is added)
<Li class = "nav-parent"> <a href = "#"> <span> system Settings </span> </a> <ul class = "children"> <li> <a href = "#"> email configuration </a> </li> <a href = "#"> file storage configuration </a> </ li> <a href = "#"> options </a> </li> </ul> </li> <li class = "nav-parent"> <a href = "#"> <span> system Settings </span> </a> <ul class = "children"> <li> <a href = "#"> email configuration </a> </li> <a href = "#"> file storage configuration </a> </li> <a href =" # "> Option </a> </li> </ul> </li> <li class =" nav-parent "> <a href =" # "> <span> system Settings </span> </a> <ul class = "children"> <li> <a href = "#"> email configuration </a> </li> <li> <a href = "#"> file storage configuration </a> </li> <a href = "#"> options </a> </ li> </ul> </li>
JS example (jquery is used here, with fewer lines of code)
Var $ container = $ ('. children '), $ trigger = $ ('. nav-parent '); // obtain all "parent and Child" $ iner respectively. hide (); // hide all "Sub" $ triggers. first (). find ('. children '). show (); // display the child of the first "parent" (expand the first) $ trigger. on ('click', function (e) {// when the "parent" click event if ($ (this ). find ('. children '). is (': Den den') {$ trigger. find ('. children '). hide (300); // close other $ (this ). find ('. children '). show (300); // display yourself} e. preventDefault ();});
In the same principle, you can change "find ()" to "next ()" to implement control over sibling nodes. This is mainly reflected in the display of text blocks and image blocks.