jquery多级菜单,html多级菜单
Jquery实现级联下拉菜单
用combobox的onSelect事件，动态加载
创新互联公司专注于企业成都全网营销、网站重做改版、勐腊网站定制设计、自适应品牌网站建设、H5建站、商城系统网站开发、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为勐腊等各大城市提供网站开发制作服务。
$("#id1").combobox({
onSelect:function(record){
$('#id2').combobox({
url:''
valueField : 'id',
textField : 'text' });
}
});//id1是你省combobox的id，id2是你市combobox的id
JQuery实现多级tab切换
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleDocument/title
script src="jquery-3.3.1.js"/script
style
.Tab{
}
.Tab span{
margin-right:10px;
cursor:pointer;
}
/style
/head
body
div class="Tab"
spanA1/span
spanB2/span
spanC3/span
/div
div style="display: none" class="tab1"
div
AA1
div style="display: none;margin-left: 100px;"
pAAA1/p
pAAA1/p
pAAA1/p
/div
/div
div
AA2
div style="display: none;margin-left: 100px;"
pAAA2/p
pAAA2/p
pAAA2/p
/div
/div
div
AA3
div style="display: none;margin-left: 100px;"
pAAA3/p
pAAA3/p
pAAA3/p
/div
/div
/div
div style="display: none" class="tab1"
div
BB1
div style="display: none;margin-left: 100px;"
pBBB1/p
pBBB1/p
pBBB1/p
/div
/div
div
BB2
div style="display: none;margin-left: 100px;"
pBBB2/p
pBBB2/p
pBBB2/p
/div
/div
div
BB3
div style="display: none;margin-left: 100px;"
pBBB3/p
pBBB3/p
pBBB3/p
/div
/div
/div
div style="display: none" class="tab1"
div
CC1
div style="display: none;margin-left: 100px;"
pCCC1/p
pCCC1/p
pCCC1/p
/div
/div
div
CC2
div style="display: none;margin-left: 100px;"
pCCC2/p
pCCC2/p
pCCC2/p
/div
/div
div
CC3
div style="display: none;margin-left: 100px;"
pCCC3/p
pCCC3/p
pCCC3/p
/div
/div
/div
/body
script
$(function(){
$(".Tab span").each(function(i){
$(this).click(function(){
$(".tab1:eq("+i+")").show().siblings(".tab1").hide()
})
})
$(".tab1div").click(function(){
$(this).find("div").show()
$(this).siblings("div").find("div").hide()
})
})
/script
/html
jquery实现二级菜单时，点击一级菜单，二级菜单滑出一下就又消失了
jquery实现由一级导航菜单到二级滑动显示效果，并点击增加背景变化效果，代码挺简单的，但是也效果也很好，是非常实用的，也是很流行的菜单样式
html:
div class="webSchoolL" id="webSchoolL"
ul class="leftTab" id="leftMeau"
li class="listL01"1/li
li
a href="#nogo"2/a
ul class="navUl"
lia href="#nogo"22/a/li
lia href="#nogo" class="curButA"22/a/li
lia href="#nogo"22/a/li
lia href="#nogo"22/a/li
/ul
/li
li
a href="#nogo"3/a
ul class="navUl"
lia href="#nogo"33/a/li
lia href="#nogo" class="curButA"33/a/li
lia href="#nogo"33/a/li
lia href="#nogo"33/a/li
/ul
/li
li
a href="#nogo"4/a
ul class="navUl"
lia href="#nogo"44/a/li
lia href="#nogo" class="curButA"44/a/li
lia href="#nogo"44/a/li
lia href="#nogo"44/a/li
/ul
/li
li
a href="#nogo"5/a
ul class="navUl"
lia href="#nogo"55/a/li
lia href="#nogo" class="curButA"55/a/li
lia href="#nogo"55/a/li
lia href="#nogo"55/a/li
/ul
/li
li
a href="#nogo" class="curButA"6/a
ul class="navUl" style="display:block;"
lia href="#nogo"66/a/li
lia href="#nogo" class="curButA"66/a/li
lia href="#nogo"66/a/li
lia href="#nogo"66/a/li
/ul
/li
li
a href="#nogo"7/a
ul class="navUl"
lia href="#nogo"77/a/li
lia href="#nogo" class="curButA"77/a/li
lia href="#nogo"77/a/li
lia href="#nogo"77/a/li
/ul
/li
li
a href="#nogo"8/a
ul class="navUl"
lia href="#nogo"88/a/li
lia href="#nogo" class="curButA"88/a/li
lia href="#nogo"88/a/li
lia href="#nogo"88/a/li
/ul
/li
li
a href="#nogo"9/a
ul class="navUl"
lia href="#nogo"99/a/li
lia href="#nogo" class="curButA"99/a/li
lia href="#nogo"99/a/li
lia href="#nogo"99/a/li
/ul
/li
/ul
/div
2
css:
.webSchoolL{ width:200px; height:460px; background:#ececec;}
ul.leftTab{ display:block; width:185px; border:1px solid #d0d0d0; margin:8px 0 0 7px; float:left; display:inline; background:#fff;}
ul.leftTab li{ width:179px; text-align:left; margin:5px 3px; float:left; display:inline;}
ul.leftTab li a{height:28px; width:179px; display:block; background:url(../images/meaulibg.png) no-repeat;line-height:28px;text-indent:47px; font-size:14px; font-weight:bold; color:#000;}
ul.leftTab li a:hover,ul.leftTab .curButA{background:url(../images/meaulicur.png) no-repeat; color:#fff; font-weight:bold; text-decoration:none;}
ul.leftTab .listL01{ height:32px; width:187px; background:url(../images/listL01.gif) no-repeat; margin:0 auto 3px auto; font-size:14px; font-weight:bold; color:#ffffff; text-indent:32px; margin:0px 0 0 -1px;line-height:32px;}
ul.leftTab li ul.navUl { display:none;border-left:1px solid #3fb4e8;border-right:1px solid #3fb4e8;border-bottom:1px solid #3fb4e8;}
ul.leftTab li ul.navUl li { float:none;margin:0px;}
ul.leftTab li ul.navUl li a { _width:177px;background:none; font-size:12px; font-weight:normal; color:#333;}
ul.leftTab li ul.navUl li a.curButA, ul.leftTab li ul.navUl li a:hover { background:url(../images/meaunavcur.png) no-repeat 18px 0px;color:#000;font-weight:normal;}
3
js:$(function(){//导航特效
$("#leftMeau li:has(ul) a").click(function(){
$(this).addClass("curButA");
$(this).siblings().slideDown();
$(this).parent().siblings().find("a").removeClass("curButA");
$(this).parent().siblings().find("ul").slideUp();
});
})
4
效果如图所示
（此图看不出滑动效果，但实际效果确实是滑动效果）
END
注意事项
此方法简单灵活，拿来就可以应用，应用修改时请注意三种样式一起修改，避免代码无用
另外应用时记得把jquery类库引到页面中来，否则无效果
如何构造jquery 多级选择器
jQuery 层次选择器
$("div span") 选取div里的所有span元素
$("div span") 选取div元素下元素名是span的子元素
$("#one +div") 选取id为one的元素的下一个div同辈元素 等同于$(#one).next("div")
$("#one~div") 选取id为one的元素的元素后面的所有div同辈元素 等同于$(#one).nextAll("div")
$(#one).siblings("div") 获取id为one的元素的所有div同辈元素（不管前后）
$(#one).prev("div") 获取id为one的元素的前面紧邻的同辈div元素
所以 获取元素范围大小顺序依次为：
$(#one).siblings("div")$("#one~div")$("#one +div") 或是
$(#one).siblings("div")$(#one).nextAll("div")$(#one).next("div")
不积跬步,无以至千里!
分享文章：jquery多级菜单,html多级菜单
文章网址：http://myzitong.com/article/hogesp.html