Today, I made a menu on the left, which should be frequently used in the background. The Code is also concise and clear, and can be used as a copy:
As follows:
The Code is as follows)
Copy codeThe Code is as follows: <! DOCTYPE html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> click the left-side menu in the background to slide up or down to display jquery </title>
<Script type = "text/javascript" src = "http://jt.875.cn/js/jquery.js"> </script>
<Script type = "text/javascript">
$ (Function (){
$ (". Box dt: first"). addClass ("active ");
$ (". Box dd: not (: first)"). hide ();
$ (". Box dt"). click (function (){
$ (This). next ("dd"). slideToggle ()
. Siblings ("dd"). slideUp ();
$ (This). toggleClass ('active ')
. Siblings ("dt"). removeClass ("active ");
});
});
</Script>
<Style type = "text/css">
* {Padding: 0; margin: 0 ;}
Body {padding: 100px; font: 12px "";}
Dl, dt, dd {list-style: none ;}
. Box {width: 500px; border-bottom: 1px solid # CCC ;}
. Box dt {height: 30px; line-height: 30px; padding: 0 10px; font-size: 12px; cursor: pointer; border: 1px solid # ccc; border-bottom: none; background: # eee url (img/bg.gif) no-repeat right-27px ;}
. Box dt. active {background-position: right 7px ;}
. Box dd {border-left: 1px solid # ccc; border-right: 1px solid # ccc; padding: 0 10px ;}
. Box dd p {line-height: 20px ;}
</Style>
</Head>
<Body>
<Div class = "box">
<Dl>
<Dt> Title 1 </dt>
<Dd>
<P> <a href = "#"> Item 1 </a> </p>
<P> <a href = "#"> Item 2 </a> </p>
<P> <a href = "#"> Item 3 </a> </p>
</Dd>
<Dt> Title 2 </dt>
<Dd>
<P> <a href = "#"> Item 1 </a> </p>
<P> <a href = "#"> Item 2 </a> </p>
<P> <a href = "#"> Item 3 </a> </p>
</Dd>
<Dt> Title 3 </dt>
<Dd>
<P> <a href = "#"> Item 1 </a> </p>
<P> <a href = "#"> Item 2 </a> </p>
<P> <a href = "#"> Item 3 </a> </p>
</Dd>
<Dt> Title 4 </dt>
<Dd>
<P> <a href = "#"> Item 1 </a> </p>
<P> <a href = "#"> Item 2 </a> </p>
<P> <a href = "#"> Item 3 </a> </p>
</Dd>
</Dl>
</Div>
</Body>
</Html>
