Not much nonsense. directly add the code: there are comments
Copy codeThe Code is as follows:
<Head>
<Title> </title>
<Style type = "text/css">
Div
{
Border: 1px solid black;
Width: 100px;
}
Ul. tit,. content
{
List-style-type: none;
}
. Menu
{
Padding: 0px;
Margin: 0px;
}
. Tit
{
Background-color: # 0094ff;
Color: White;
Padding: 2px 10px;
Cursor: pointer;
}
</Style>
<Script src = "js/jquery-1.9.0.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
// Hide the menu directly at the beginning
$ (". Content"). hide ();
// Add a click event to the title
$ (". Tit"). click (function (){
// When clicked, open the menu and hide other menus.
$ (This). next (). slideDown (). parent (). siblings (). children (". content"). slideUp ();
}). First (). next (). slideDown (); // The first menu is opened by default.
});
</Script>
</Head>
<Body>
<Div>
<Ul class = "menu">
<Li class = "tit"> menu 1 </li>
<Li class = "content">
<Ul>
<Li> 11111 </li>
<Li> 11111 </li>
<Li> 11111 </li>
<Li> 11111 </li>
</Ul>
</Li>
</Ul>
<Ul class = "menu">
<Li class = "tit"> menu 2 </li>
<Li class = "content">
<Ul>
<Li> 22222 </li>
<Li> 22222 </li>
<Li> 22222 </li>
<Li> 22222 </li>
</Ul>
</Li>
</Ul>
<Ul class = "menu">
<Li class = "tit"> menu 3 </li>
<Li class = "content">
<Ul>
<Li> 22222 </li>
<Li> 22222 </li>
<Li> 22222 </li>
<Li> 22222 </li>
</Ul>
</Li>
</Ul>
</Div>
</Body>