jQuery折叠下拉菜单收缩展开
的有关信息介绍如下:
jQuery折叠下拉菜单收缩展开
新建html
书写html。
1.此导航个数超过6个会自动隐藏超出部分,并出现“展开”按钮
2.点击文字可跳转链接,点击小箭头可打开二级菜单
3.点击超过第6个之后的小箭头展开二级菜单后,点击 “收起” 按钮,其二级菜单全部收起(前6个还是当前状态)
书写css样式。
html{background:none repeat scroll 0 0 #FFFFFF; overflow-y:scroll}
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, fieldset, lengend, button, input, textarea, form, th, td{margin:0; padding:0}
body, button, input, select, textarea{font:14px/1.8 "Microsoft Yahei", verdana}
.ie10 body,.ie11 body{font:14px/1.8 "Microsoft Yahei", verdana}
h1, h2, h3, h4, h5, h6{font-size:100%; font-weight:normal}
button, input, select, textarea{font-size:100%}
hr{border:0; height:1px; *color:#fff}
address, cite, dfn, em, var{font-style:normal}
small{font-size:12px}
.fl-clear{clear:both}
.fl-clr{zoom:1}
.fl-clr:after{display:block; clear:both; height:0; content:"\0020"}
table{border-collapse:collapse; border-spacing:0}
ul, ol{list-style:none outside none}
a{text-decoration:none; color:#696969}
a:hover{text-decoration:none; color:#ff6637}
img{border:0}
.nav_title{text-align:center; padding:50px 0; font-size:16px;}
.nav_title a{margin:0 20px; display:inline-block; border:1px solid #ccc; height:40px; line-height:40px; padding:0 20px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px; overflow:hidden}
.nav_title .a{color:#fff; background:#ff6637;border:1px solid #ff6637;}
.content_left{width:240px; margin:50px auto}
.content_left .title{height:45px; background:#ff6637; color:#fff; padding:0 20px; line-height:45px; font-size:16px}
.content_left .title span{background:url(img/ioc.png) no-repeat 0 center; padding-left:22px;}
.left_nav{border:1px solid #e6e6e6; border-top:0; overflow:hidden; padding:0 0 20px 0}
.left_nav ul{margin-top:-1px;}
.left_nav li{padding:0 20px; border-top:1px dashed #e7e7e7}
.left_nav li .t{height:50px; line-height:50px; padding:0 0 0 18px; position:relative}
.left_nav li .t i{position:absolute; left:0; top:0; width:18px; height:50px;background:url(img/ioc_l.png) no-repeat 0 center; cursor:pointer}
.left_nav li .t a,.left_nav li .t.hover:hover a{color:#000}
.left_nav li .t:hover i{background:url(img/ioc_la.png) no-repeat 0 center;}
.left_nav li .t:hover a{color:#ff5825}
.left_nav li .t.hover i{background:url(img/ioc_b.png) no-repeat 0 center; }
.left_nav li .txt{padding:0 0 20px 18px; display:none}
.left_nav li .txt p{line-height:30px; height:30px; overflow:hidden}
.left_nav .more{background:#ff6637; display:block; width:120px; height:30px; margin:0 auto; text-align:center; line-height:30px; color:#fff; cursor:pointer;border-radius:50px;-moz-border-radius:50px;-webkit-border-radius:50px; overflow:hidden}
.left_nav .more:hover{background:#ff5825}
.left_nav .more span{padding-right:18px; background:url(img/ioc_ba.png) no-repeat right center;}
.left_nav .more.hover span{background:url(img/ioc_t.png) no-repeat right center;}
.explain_txt{width:860px; margin:0 auto; line-height:40px; padding:0 0 200px 0; font-size:16px}
添加引用js。
书写单独js。
$(".left_nav li .t i").click(function(){
$(this).parent(".t").toggleClass("hover");
$(this).parent(".t").next(".txt").slideToggle()
})
var sl=$(".left_nav li").length;
if(sl>6){
$(".left_nav li").each(function(index){
if(index>5){
$(this).hide(0)
}
})
$(".left_nav .more").show()
}else{
$(".left_nav .more").hide()
}
function opene(){
$(".left_nav li").each(function(index){
if(index>5){
$(this).slideToggle(300);
$(this).find(".t").removeClass("hover");
$(this).find(".txt").slideUp();
}
})
}
$(".left_nav .more").click(function() {
opene();
$(this).toggleClass("hover");
var text=$(this).find("span").text();
if(text=="灞曞紑"){
$(this).find("span").text("鏀惰捣");
}else if(text=="鏀惰捣"){
$(this).find("span").text("灞曞紑");
}
});
if($("div").hasClass("owl-carousel")){
$('#scroll').owlCarousel({
items:4,
autoPlay:false,
navigation:true,
navigationText: ["",""],
scrollPerPage:false
});
}
$(".details_box ul li .more").hover(function(){
$(this).next(".txt").fadeIn()
},function(){
$(this).next(".txt").fadeOut()
});
查看效果。



