运用jQuery写下拉菜单效果
原创
©著作权归作者所有：来自51CTO博客作者fengGer的bugs的原创作品，请联系作者获取转载授权，否则将追究法律责任
<head>
<meta charset="utf-8" />
<title>下拉菜单</title>
</head>
<style type="text/css">
ul li {
list-style: none;
width: 150px;
cursor: pointer;
}
li ul{
display: none;
}
.plus{
list-style-image: url(img/plus.gif);
}
.minus{
list-style-image: url(img/minus.gif);
}
</style>
<body>
<ul>
<li>主题市场
<ul>
<li>运动派
<ul>
<li>三级菜单a</li>
<li>三级菜单b</li>
<li>三级菜单c</li>
<li>三级菜单d</li>
</ul>
</li>
<li>有车族
<ul>
<li>三级
<ul>
<li>四级
<ul>
<li>五级菜单a</li>
<li>五级菜单b</li>
<li>五级菜单c</li>
<li>五级菜单d</li>
</ul>
</li>
<li>四级</li>
<li>四级</li>
</ul>
</li>
<li>三级</li>
<li>三级</li>
<li>三级</li>
</ul>
</li>
<li>生活家</li>
</ul>
</li>
<li>特色购物
<ul>
<li>淘宝二手</li>
<li>拍卖会</li>
<li>爱逛街</li>
<li>全球购</li>
<li>淘女郎</li>
</ul>
</li>
<li>优惠促销
<ul>
<li>天天特价</li>
<li>免费试用</li>
<li>清仓</li>
<li>1元起拍</li>
</ul>
</li>
<li>工具</li>
</ul>
//<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//给有子菜单的li添加一个图标
$("li").has("ul").addClass("plus")
.click(function(e){
e.stopPropagation();
if($(e.target).children().length){
$(this).children().slideToggle(800);
$(this).toggleClass("minus");
}
})
});
</script>
</body>
