DIV点击折叠实例代码

时间：2021-05-08

废话不多说了，关键代码如下所示：

CSS Code复制内容到剪贴板

<!doctypehtml>

<html>

<head>

<metacharset="utf-8">

<metacontent="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"name="viewport">

<styletype="text/css">

*{margin:0;padding:0;}

.menu{width:100%;}

.menu.item{width:100%;height:auto;background-color:#fefefe;}

.menu.itemh1{font-size:15px;width:100%;position:relative;}

.menu.itemh1i{display:inline-block;height:15px;width:10px;position:absolute;rightright:10px;top:0;background:url(images/rightright.png)no-repeat;background-size:10pxauto;}

.menu.itemul{display:none;}

.menu.itemulli{list-style:none;color:#000;background-color:#fefefe;border-bottom:solid1px#ededed;line-height:32px;width:100%;position:relative;}

.menu.itemullip{display:none;}

.menu.item.activeh1i{display:inline-block;height:10px;width:15px;position:absolute;rightright:10px;top:3px;background:url(images/down.png)no-repeat;background-size:15pxauto;}

.menu.itemullispan.icon{display:inline-block;height:15px;width:10px;position:absolute;rightright:10px;top:0;background:url(images/rightright.png)no-repeat;background-size:10pxauto;}

.menu.itemulli.activespan.icon{display:inline-block;height:10px;width:15px;position:absolute;rightright:10px;top:3px;background:url(images/down.png)no-repeat;background-size:15pxauto;}

.menu.item.activeul{display:block;}

.menu.item.activeulli.activep{display:block;}

</style>

</head>

<body>

<divclass="menu">

<divclass="item">

<ul>

<p>锋科技了束带结发历史的会计法落实到飞</p>

</li>

<p>锋科技了束带结发历史的会计法落实到飞</p>

</li>

<p>锋科技了束带结发历史的会计法落实到飞</p>

</li>

</ul>

</div>

<divclass="item">

<ul>

<p>锋科技了束带结发历史的会计法落实到飞</p>

</li>

<p>锋科技了束带结发历史的会计法落实到飞</p>

</li>

<p>锋科技了束带结发历史的会计法落实到飞</p>

</li>

</ul>

</div>

<divclass="item">

<ul>

<p>锋科技了束带结发历史的会计法落实到飞</p>

</li>

<p>锋科技了束带结发历史的会计法落实到飞</p>

</li>

<p>锋科技了束带结发历史的会计法落实到飞</p>

</li>

</ul>

</div>

<scripttype="text/javascript"src="js/jquery-1.7.min.js"></script>

<scripttype="text/javascript">

jQuery(function(){

$('.menu.item').each(function(){

varflag=true;

$(this).find('h1').on('click',function(){

if(flag){

$('.menu.item').removeClass('active');

$(this).parent('.item').addClass('active');

flag=false;

}else{

$(this).parent('.item').removeClass('active');

flag=true;

}

});

$('.menu.itemulli').each(function(){

varflag=true;

$(this).on('click',function(event){

event.preventDefault();

event.stopPropagation();

if(flag){

$('.menuulli').removeClass('active');

$(this).addClass('active');

flag=false;

}else{

$(this).removeClass('active');

flag=true;

}

});

</script>

</body>

</html>

好了，本文内容到此结束，希望对大家有所帮助！

DIV点击折叠实例代码

相关文章

jquery实现的Accordion折叠面板效果代码

js实现点击生成随机div

基于jQuery实现的Ajax 验证用户名是否存在的实现代码

C#实现DataList里面嵌套DataList的折叠菜单

jquery实现点击查看更多内容控制段落文字展开折叠效果