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>

简单的下拉菜单就实现了。

jquery实现简单的下拉菜单相关推荐

jQuery做简单的下拉菜单
效果: css 代码 <style>* {margin: 0;padding: 0;}li {list-style-type: none;}a {text-decoration: none ...
无限级导航PHP,jQuery多级无限级导航下拉菜单代码
jQuery多级无限级导航下拉菜单代码 js代码 $(document).ready(function() { $("ul.nav li").hover(function(){ $ ...
利用jQuery制作的导航下拉菜单效果
利用jQuery制作的导航下拉菜单效果,其实利用css同样可以实现导航下拉菜单效果,但自从学习了jQuery后,感觉还是jQuery做起来效果更好.jQuery制作导航下拉菜单,需要用到jQuery方 ...
jquery实现二级导航下拉菜单效果实例
大家都知道jQuery是一个框架,它对JS进行了封装,使其更方便使用.前面两篇博文分别是用CSS样式和JS实现的,那么这篇就用jQuery来实现二级下拉式菜单. 使用JQuery实现需要用到的知识有: ...
jquery实现二级导航下拉菜单效果
大家都知道jQuery是一个框架,它对JS进行了封装,使其更方便使用.前面两篇博文分别是用CSS样式和JS实现的,那么这篇就用jQuery来实现二级下拉式菜单. 使用JQuery实现需要用到的知识有: ...
js实现简单的下拉菜单列表
下拉菜单效果图: 基本代码如下: <!DOCTYPE html> <html><head><meta charset=</
利用JavaScript实现简单的下拉菜单
最近几日,突然对Javascript非常兴趣,就想用Javascript实现几个经常都实现的特效,虽然对于javascript一直能够做一些开发,但还是使用很少. 首先我想实现的就是一个下拉样式的树, ...
jquery简洁版滑动下拉菜单问题解决-22
快速滑动不停切换 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
html下拉菜单图片,JS+CSS 制作的超级简单的下拉菜单附图
先看效果: 代码: Good Test function showSubMenu(SubMenu) { document.getElementById(SubMenu).style.display = ...

jquery实现简单的下拉菜单

本文用简单的几行jquery代码实现简单的下拉菜单效果

jquery实现简单的下拉菜单相关推荐

最新文章

热门文章