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")

不积跬步,无以至千里!