jQuery折叠下拉菜单收缩展开

2025-10-18 16:04:57

1、新建html

jQuery折叠下拉菜单收缩展开

2、书写html。

<ul>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<div class="t"><i></i><a href="#">百度经验</a></div>槐伐

</div>

</li>

</div>

</li>

悦召联 <li style="display: list-item;">

</div>

</li>

</div>

</li>

</div>

</li>

</div>

</li>

</ul>

</div>

1.此导航个数超过6个会自动隐藏超出部分，并出现“展开”按钮

2.点击文字可跳转链接，点击小箭头可打开二沫塑级菜单

3.点击超过第6个之后的小箭头展开二级菜单后，点击 “收起” 按钮，其二级菜单全部收起（前6个还是当前状态）

</div>

3、书写css样式。

<style>

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}

</style>

4、添加引用js。<script charset="utf-8" type="text/javascript" src="jquery.js"></script>

jQuery折叠下拉菜单收缩展开

5、书写单独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()

});

</script>

6、查看效果。

jQuery折叠下拉菜单收缩展开

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。