基于jquery实现三级下拉菜单
本文实例为大家分享了jquery三级下拉菜单的具体实现代码，供大家参考，具体内容如下
在写这个的时候，首先要捋顺思路。点一个菜单的时候，其他的要闭合，点一级菜单的时候，二三级菜单要闭合，等等。
大致代码如下：
<body>
<aside>
<ul class="one">
<li> <a href="#" class="a">目录A</a>
<ul class="two" style="display: none">
<li><a href="#" class="a">二级目录A</a>
<ul class="three" style="display: none">
<li><a href="#">三级目录A</a></li>
</ul>
</li>
<li><a href="#" class="a">二级目录B</a></li>
<li><a href="#" class="a">二级目录C</a></li>
</ul>
</li>
<li> <a href="#" class="a">目录B</a>
<ul class="two" style="display: none">
<li><a href="#" class="a">二级目录A</a>
<ul class="three" style="display: none">
<li><a href="#">三级目录A</a></li>
</ul>
</li>
<li><a href="#" class="a">二级目录B</a></li>
<li><a href="#" class="a">二级目录C</a></li>
</ul>
</li>
<li> <a href="#" class="a">目录C</a> </li>
</ul>
</aside>
//jQuery部分
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function() {
$('.a').click(function() {
if ($(this).siblings('ul').css('display') == 'none') {
$(this).siblings('ul').slideDown(100).children('li');
if ($(this).parents('li').siblings('li').children('ul').css('display') == 'block') {
$(this).parents('li').siblings('li').children('ul').slideUp(100);
}
} else {
//控制自身菜单下子菜单隐藏
$(this).siblings('ul').slideUp(100);
//控制自身菜单下子菜单隐藏
$(this).siblings('ul').children('li').children('ul').slideUp(100);
}
});
});
</script>
</body>
如果要添加样式的话，一定要注意，否则菜单可能会出现错误。
完整代码地址：https://github.com/SabrinaTian/ThreeMenuNav.git
git里还有一个带有图标的案例，不点击的话是+号，菜单打开后，变为-号。
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关推荐
-
中国地区三级联动下拉菜单效果分析
因为最近有需要用到中国地区三级联动下拉菜单,虽然用公司的框架已经实现,但是看的比较迷茫,就网上找了下相关代码,主要的数据和功能实现都是在js文件中,网上找的地区数据有的地方不完整,需要自己添加,虽然和公司的框架实现的代码不一样,还是先把代码放上了,以后需要的时候可以看看,大家也可以看看! 1.首先是js文件(area.js): 复制代码 代码如下: function Dsy() { this.Items = {}; } Dsy.prototype.add = function(id,iArray
-
php 三级联动菜单
数据库结构 复制代码 代码如下: -- 表的结构 `bigclass` -- CREATE TABLE `bigclass` ( `bigclassid` int(11) NOT NULL auto_increment, `bigclassname` varchar(200) collate utf8_unicode_ci NOT NULL, `sort` int(11) NOT NULL, `suoshu` int(1) NOT NULL, PRIMARY KEY (`bigclassid`)
-
asp.net DropDownList 三级联动下拉菜单实现代码
复制代码 代码如下: if (!IsPostBack) { //一级分类列表 this.DropDownList1.DataSource = dsbb.SelectSubjct1(); this.DropDownList1.DataTextField = "cName"; this.DropDownList1.DataValueField = "Ccode"; this.DropDownList1.DataBind(); this.DropDownList1.Ite
-
三级下拉菜单的js实现代码
三级下拉菜单的实现: 复制代码 代码如下: function list(idstr){ var name1="subtree"+idstr; var name2="img"+idstr; var objectobj=document.all(name1); var imgobj=document.all(name2); //alert(imgobj); if(objectobj.style.display=="none"){ for(i=1;i&
-
ASP+JS三级联动下拉菜单[调用数据库数据]
网上三级菜单多是多但是代码都比较烦,我这个应该说还是比较直观的:'肯定先要连接数据库了,不用说了 '数据库结构 '类别1表名称:a 字段:ID,Name 说明:ID为主键是类别1的ID值,Name为类别1的名称 '类别2表名称:aa 字段:ID,aID,Name 说明:ID为主键是类别2的ID值,aID为所属类别1的ID值,Name为类别2的名称 '类别3表名称:aaa 字段:ID,aID,aaID,Name 说明:ID为主键是类别3的ID值,aID为所属类别1的ID值,aaID为所
-
jquery 实现二级/三级/多级联动菜单的思路及代码
本文介绍使用jQuery的AJAX功能和asp.net来实现省市区的三级联动效果,其他二级.三级或多级联动也可以按照此方法完成. 文章中涉及到的数据表为City,为方便管理. 设计此表如下 ID:自增长字段 City_Name:城市名称 City_Code:城市代码 我们根据城市代码来查询省.市.区.城市代码结构大致如下: 内蒙古:150000,呼和浩特:150100,新城区:150101. 其他地区代码与此一样,省级为省级编号+0000,市级为省级编号+市级编号+00,地区为省级编号+市级编号
-
CSS导航菜单，三级菜单实现代码
CSS导航 首页 关于我们 公司简介 董事长&总裁 发展历程 公司荣誉 产品&服务 产品1 配套 配件 产品2 产品2-1 产品2-2 服务 服务111 服务112 服务113 服务114 服务115 新闻中心 公告 行业新闻 人力资源 人才战略 社会招聘 公司福利 合作伙伴 伙伴1 伙伴2 伙伴3 联系我们 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
javascript 三级下拉选择菜单Levels对象
JavaScript: 复制代码 代码如下: <script type="text/javascript"> var level1 = ["Beijing", "GuangZhou", "ShangHai"]; var level2 = [["ZhaoYang", "TianTan", "GuGong"], ["Tianhe", &qu
-
js左侧三级菜单导航实例代码
效果演示: 实例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lan
-
从QQ网站中提取的纯JS省市区三级联动菜单
我发现在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动.所以研究了一下.他的界面如下: 何不直接使用的数据呢? 惊喜的是QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js 使用方法如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 直接使用QQ的省市区数据