jquery实现简单下拉菜单效果
本文用简单的几行jquery代码实现简单的下拉菜单效果,供大家参考,具体内容如下
看效果
html
<ul> <li> 主题市场 <ul> <li> 运动派 <ul> <li>三级菜单a</li> <li>三级菜单b</li> <li>三级菜单c</li> <li>三级菜单d</li> </ul> </li> <li> 有车族 <ul> <li> 三级 <ul> <li>四级</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>
简单设置一下css
<style type="text/css"> ul li { list-style: none; } li ul { display: none; } .plus { list-style-image: url(img/plus.gif); } .minus { list-style-image: url(img/minus.gif); } </style>
js代码
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function () { //给有ul的li加下图标(添加类名) $("li:has(ul)") .addClass("plus") //添加点击事件 .click(function (e) { //看看直接点的那个li(事件源)有没有子元素 if ($(e.target).children().length) { $(this).children().slideToggle(); $(this).toggleClass("minus"); } e.stopPropagation(); //阻止事件冒泡,目的只让当前这一层产生动画 }); }); </script>
简单的下拉菜单就实现了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)