jquery 菜单1
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<style type="text/css">
dl, dt, dd, ul, li, a{
margin: 0;
padding: 0;
}
a{
color: #292929;
}
li{
list-style-type: none;
padding-left: .2em;
}
dl{
width: 150px;
}
dt{
background-color: #FF6500;
}
</style>
<script src="http://www.cssrain.cn/demo/1/SildeTab/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script language="javascript" >
$(function(){
$("dd:not(:first)").hide();
$("dt a").click(function(){
$("dd").slideUp();
$(this).parent("dt").next("dd").slideDown("normal");
});
})
</script>
<dl>
<dt><a href="#">Home</a></dt>
<dd>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</dd>
<dt><a href="#">About</a></dt>
<dd>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
</ul>
</dd>
<dt><a href="#">Blog</a></dt>
<dd>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
</ul>
</dd>
<dt><a href="#">Contact</a></dt>
<dd>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
</ul>
</dd>
</dl>
<br><br>
<pre>
代码:
$("dd:not(:first)").hide();
$("dt a").click(function(){
$("dd").slideUp();
$(this).parent("dt").next("dd").slideDown("normal");
});
</pre>
dl, dt, dd, ul, li, a{
margin: 0;
padding: 0;
}
a{
color: #292929;
}
li{
list-style-type: none;
padding-left: .2em;
}
dl{
width: 150px;
}
dt{
background-color: #FF6500;
}
</style>
<script src="http://www.cssrain.cn/demo/1/SildeTab/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script language="javascript" >
$(function(){
$("dd:not(:first)").hide();
$("dt a").click(function(){
$("dd").slideUp();
$(this).parent("dt").next("dd").slideDown("normal");
});
})
</script>
<dl>
<dt><a href="#">Home</a></dt>
<dd>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</dd>
<dt><a href="#">About</a></dt>
<dd>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
</ul>
</dd>
<dt><a href="#">Blog</a></dt>
<dd>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
</ul>
</dd>
<dt><a href="#">Contact</a></dt>
<dd>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
</ul>
</dd>
</dl>
<br><br>
<pre>
代码:
$("dd:not(:first)").hide();
$("dt a").click(function(){
$("dd").slideUp();
$(this).parent("dt").next("dd").slideDown("normal");
});
</pre>