一。。。toggle()方法
<style>
div{
200px;
height:auto;
margin:10px;
color:#fff;
}
div h3{
height:30px;
line-height:30px;
background:#f00;
margin:0px;
text-align:center;
}
div ul{
list-style-type:none;
margin:0px;
padding-left:0px;
background:#00f;
display:none;
}
/*.h{
display:block;
}*/
div ul li{
text-align:center;
margin-bottom:5px;
}
</style>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h3").toggle(function(){
$(this).next("ul").slideDown();
},function(){
$(this).next("ul").slideUp();
})
})
</script>
</head>
<body>
<div>
<h3>侧导航</h3>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
<div>
<h3>侧导航</h3>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
<div>
<h3>侧导航</h3>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
</body>
</html>
二。。。侧导航 三角图标改变 点击显示点击隐藏
<style type="text/css">
div{
200px;
height:auto;
margin:10px;
color:#fff;
}
div h3{
height:30px;
line-height:30px;
background:#ff0 url(img/s1.png) no-repeat center left;
margin:0px;
text-align:center;
}
.aa{
background:#f0f url(img/s2.png) no-repeat center left;
}
div ul{
list-style-type:none;
margin:0px;
padding-left:0px;
background:#00f;
display:none;
}
.h{
display:block;
}
div ul li{
text-align:center;
margin-bottom:5px;
}
</style>
</head>
<body>
<div>
<h3>侧导航</h3>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
<div>
<h3>侧导航</h3>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
<div>
<h3>侧导航</h3>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
// $("h3").click(function(){
// if($(this).next().attr("class")=="h"){
// $(this).next("ul").hide(400);
// $(this).removeAttr("class").next("ul").removeAttr("class");
// }else{
// $(this).next("ul").show(400);
// $(this).attr("class","aa").next("ul").attr("class","h");
// }
// })
$("h3").click(function(){
if($(this).next().hasClass("h")){
$(this).next("ul").hide(400);
$(this).removeClass("aa").next("ul").removeClass("h");
}else{
$(this).next("ul").show(400);
$(this).addClass("aa").next("ul").addClass("h");
}
})
})
</script>
</html>
三。。。侧导航 点击显示 点击隐藏 attr方法
<style type="text/css">
div{
200px;
height:auto;
margin:10px;
color:#fff;
}
div h3{
height:30px;
line-height:30px;
background:#f00;
margin:0px;
text-align:center;
}
div ul{
list-style-type:none;
margin:0px;
padding-left:0px;
background:#00f;
display:none;
}
.h{
display:block;
}
div ul li{
text-align:center;
margin-bottom:5px;
}
</style>
</head>
<body>
<div>
<h3>侧导航</h3>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
<div>
<h3>侧导航</h3>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
<div>
<h3>侧导航</h3>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("h3").click(function(){
if($(this).next().attr("class")=="h"){
$(this).next().hide(400);
$(this).next().removeAttr("class");
}else{
$(this).next().show(400);
$(this).next().attr("class","h");
}
})
})
</script>
</html>
四。。。侧导航 三角图标改变 始终只显示一个 其他隐藏
<style>
div{
200px;
height:auto;
background:#00f;
}
div h3{
height:30px;
line-height:30px;
color:#fff;
font-size:16px;
margin-left:10px;
padding-left:20px;
}
.aa{
background:url(img/s1.png) no-repeat left center;
}
.bb{
background:url(img/s2.png) no-repeat left center;
}
div ul{
list-style-type:none;
/*margin:0px;*/
margin-left:-40px;
margin-top:-10px;
display:none;
}
div ul li{
margin-left:-40px;
text-align:center;
margin:0px;/*使li的背景颜色不会超出div的背景*/
margin-bottom:5px;
font-size:16px;
background:#ff0;
}
</style>
</head>
<body>
<div>
<h3 class="aa">产品介绍</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div>
<h3 class="aa">产品介绍</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div>
<h3 class="aa">产品介绍</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("h3").click(function(){
$(this).addClass("bb").next().show(400).end().parent().siblings().children("ul").hide(400).end().children("h3").removeClass("bb");
})
})
</script>
</html>
五。。。侧导航 始终只显示一个 其他隐藏
<style>
div{
200px;
height:auto;
background:#ff0;
margin:10px;
color:#fff;
}
div h3{
height:30px;
line-height:30px;
background:#f00;
padding-left:10px;
}
div ul{
list-style-type:none;
margin:0px;
margin-left:-40px;
display:none;
}
div ul li{
height:20px;
line-height:20px;
border-bottom:#000 solid 1px;
text-align:center;
color:#000;
}
.show{
background:#0f0;
}
</style>
</head>
<body>
<div>
<h3>公司简介</h3>
<ul>
<li>公司历史</li>
<li>公司历史</li>
<li>公司历史</li>
</ul>
</div>
<div>
<h3>公司简介</h3>
<ul>
<li>公司历史</li>
<li>公司历史</li>
<li>公司历史</li>
</ul>
</div>
<div>
<h3>公司简介</h3>
<ul>
<li>公司历史</li>
<li>公司历史</li>
<li>公司历史</li>
</ul>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
// $("h3").click(function(){
// $(this).addClass("show").next("ul").show(400).end().parent().siblings("div").children("ul").hide(400).end().end().end().parent().siblings("div").children("h3").removeClass("show");
// })
$("h3").click(function(){
$(this).addClass("show").next("ul").show(400).end().parent().siblings("div").children("ul").hide(400).prev("h3").removeClass("show");
})
})
</script>
</html>
六。。。侧导航 终极版
<style type="text/css">
div{
200px;
height:auto;
margin:10px;
}
div h3{
font-size:20px;
color:#333;
height:30px;
line-height:30px;
text-align:center;
background:#0f0;
margin:0px;
}
div p{
margin:0px;
display:none;
}
div p a{
display:block;
height:25px;
line-height:25px;
text-align:center;
font-size:16px;
color:#666;
background:#ff0;
text-decoration:none;
border-bottom:#333 solid 1px;
}
div p a:hover{
color:#fff;
background:#999;
}
</style>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e){
$("div").hover(function(){
$(this).children("p").stop(true,true).slideDown(500);
},function(){
$(this).children("p").stop(true,true).slideUp(500);
});
})
</script>
</head>
<body>
<div>
<h3>侧导航</h3>
<p>
<a href="#">侧导航</a>
<a href="#">侧导航</a>
<a href="#">侧导航</a>
</p>
</div>
<div>
<h3>侧导航</h3>
<p>
<a href="#">侧导航</a>
<a href="#">侧导航</a>
<a href="#">侧导航</a>
</p>
</div>
<div>
<h3>侧导航</h3>
<p>
<a href="#">侧导航</a>
<a href="#">侧导航</a>
<a href="#">侧导航</a>
</p>
</div>
</body>
</html>
七。。。侧导航特效
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h3").click(function(){
$("h3").toggleClass("aa");
$("h3").next().toggleClass("vv");
});
});
</script>
<style>
h3{
120px;
height:20px;
border:#000 1px solid;
text-align:center;
background-image:url(img/s1.png) ;
background-repeat:no-repeat;
}
.aa{
120px;
height:20px;
border:#000 1px solid;
text-align:center;
background-image:url(img/s2.png) ;
background-repeat:no-repeat;
}
ul{
background:#6FC;
height:100px;
80px;
margin-top:-18px;
}
.vv{
display:none;
}
</style>
</head>
<body>
<div>
<h3>公司部门</h3>
<ul>
<li>市场部</li>
<li>文化部</li>
<li>人员部</li>
<li>行政部</li>
</ul>
</div>
</body>
</html>
八。。。二级菜单 终极版（三 四 多级菜单都适用）
<style>
#nav{
position:relative;
height:auto;
900px;
background:#0a0;
}
#nav ul{
list-style-type:none;
margin:0px;
margin-left:-40px;
}
#nav ul li{
float:left;
text-align:center;
100px;
/*给li设置width,不能给a设置width.否则所有的a都会变成100px,都呈现浮动效果*/
}
#nav ul li a{
text-decoration:none;
display:block;
height:30px;
line-height:30px;
font-size:18px;
}
#nav ul li a:link,#nav ul li a:visited{
color:#fff;
background:#4a4;
}
#nav ul li a:hover{
color:#000;
background:#0a0;
}
#nav ul li ul{
list-style-type:none;
margin:0px;
margin-left:-40px;
display:none;
}
#nav ul li ul li{
height:25px;
line-height:25px;
font-size:14px;
}
#nav ul li ul li a{
display:block;
}
#nav ul li ul li a:link,#nav ul li ul li a:visited{
color:#fff;
background:#4a4;
}
#nav ul li ul li a:hover{
color:#0ff;
/*background:#0a0;*/
}
</style>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#nav li:has(ul)").mouseenter(function(){
$(this).children("ul").stop(true,true).slideDown();
})
$("#nav li:has(ul)").mouseleave(function(){
$(this).children("ul").stop(true,true).slideUp();
})
//li:has(ul) 选取li中包含ul的li
// stop(true,true)阻止事件冒泡，消除下拉时的闪动
})
</script>
</head>
<body>
<div id="nav">
<ul> <!-- ul嵌套加载速度快 -->
<li><a href="#">首页</a></li>
<li><a href="#">公司简介</a>
<ul>
<li><a href="#">历史</a></li>
<li><a href="#">公司文化</a></li>
<li><a href="#">历史</a></li>
<li><a href="#">公司文化</a></li>
</ul>
</li>
<li><a href="#">公司简介</a>
<ul>
<li><a href="#">历史</a></li>
<li><a href="#">公司文化</a></li>
<li><a href="#">历史</a></li>
<li><a href="#">公司文化</a></li>
</ul>
</li>
<li><a href="#">公司简介</a>
<ul>
<li><a href="#">历史</a></li>
<li><a href="#">公司文化</a></li>
<li><a href="#">历史</a></li>
<li><a href="#">公司文化</a></li>
</ul>
</li>
<li><a href="#">公司简介</a>
<ul>
<li><a href="#">历史</a></li>
<li><a href="#">公司文化</a></li>
<li><a href="#">历史</a></li>
<li><a href="#">公司文化</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>