Nonsense not much to say, directly on the code: there are comments
Copy Code code as follows:
<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 () {
To hide a menu directly at the beginning
$ (". Content"). Hide ();
Add a click event to the title
$ (". Tit"). Click (function () {
When clicked, open the menu, while the other menu hides
$ (this). Next (). Slidedown (). Parent (). siblings (). Children (". Content"). Slideup ();
The first (). Next (). Slidedown ();
});
</script>
<body>
<div>
<ul class= "Menu" >
<li class= > 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= > 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= > Menu 3</li>
<li class= "Content" >
<ul>
<li>22222</li>
<li>22222</li>
<li>22222</li>
<li>22222</li>
</ul>
</li>
</ul>
</div>
</body>
