Click on the drop-down and use jQuery to achieve the hidden menu
specific effect is as follows:
Click on the drop-down menu when open, while closing others have opened drop-down menu, and click again to close the drop-down menu;
Here is the code section:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; } .list { width: 300px; border: 1px solid black; } .at the { width: 100%; height: 40px; background-color: yellow; border-bottom: 1px solid black; color: black; font-size: 20px; cursor: pointer; } .li: hover { color: red; } .else { width: 100%; display: none; } .else-list { width: 100%; height: 40px; background-color: white; border: 1px solid black; border-left: none; border-right: none; text-align: center; font-size: 20px; color: black; } .else-list:hover { color: white; background-color: blue; } .last { border-bottom: none; } .first { border-top: none; } </style> </head> <body> <ul class="list"> <li> <div class="li"> News Center </div> <div class="else"> <Div class = "else-list first"> Add news </ div> <Div class = "else-list"> Add news </ div> <Div class = "else-list"> Add news </ div> <Div class = "else-list"> Add news </ div> </div> </li> <li> <div class="li"> about us </div> <div class="else"> <Div class = "else-list first"> Add news </ div> <Div class = "else-list"> Add news </ div> <Div class = "else-list"> Add news </ div> <Div class = "else-list"> Add news </ div> </div> </li> <li> <div class="li"> Business Contacts </div> <div class="else"> <Div class = "else-list first"> Add news </ div> <Div class = "else-list"> Add news </ div> <Div class = "else-list"> Add news </ div> <Div class = "else-list"> Add news </ div> </div> </li> <li class="last"> <div class="li"> contact us </div> <div class="else"> <Div class = "else-list first"> Add news </ div> <Div class = "else-list"> Add news </ div> <Div class = "else-list"> Add news </ div> <Div class = "else-list"> Add news </ div> </div> </li> </ul> <script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function() { . $ ( '. List') find ( 'li: first-child') children ( 'else.') Show (); // first line of the default display. $(".list > li").on("click", ".li", function() { $(this).next('.else').slideToggle(500); $(this).parent().siblings().children('.else').slideUp(500); $("html,body").animate({ scrollTop: 0 }, 500); }); }); </script> </body> </html>