废话不多说了，关键代码如下所示：
CSS Code 复制内容到剪贴板
<!docty PE &nbs p; ht ML > <html> <head> < ;m eta charset= "utf-8" > <meta content = "width=device-width, in IT ial -s cale=1.0, maximum-scale=1.0, user-scalable=0" n am e= "viewport" > <title>测试</title> <style type= "text/css" > *{ m arg in :0; padding :0;} .menu{ width :100%;} .menu .item{ width :100%; h ei ght : auto ; background-color : # fefefe ;} .menu .item h1 { font-size : 15px ; width :100%; position : relative ;} .menu .item h1 i{ dis play : inline - block ; height : 15px ; width : 10px ; position : absolute ; right right : 10px ; top :0; background : url (images/ right right .png) no-repeat ; background - size : 10px auto ;} .menu .item ul{ display : none ;} .menu .item ul li{ list-style : none ; color : #000 ; background-color : #fefefe ; border-bottom : solid 1px #ededed ; line-height : 32px ; width :100%; position : relative ;} .menu .item ul li p{ display : none ;} .menu .item.active h1 i{ display : inline - block ; height : 10px ; width : 15px ; position : absolute ; right right : 10px ; top : 3px ; background : url (images/down.png) no-repeat ; background - size : 15px auto ;} .menu .item ul li span. icon { display : inline - block ; height : 15px ; width : 10px ; position : absolute ; right right : 10px ; top :0; background : url (images/ right right .png) no-repeat ; background - size : 10px auto ;} .menu .item ul li.active span. icon { display : inline - block ; height : 10px ; width : 15px ; position : absolute ; right right : 10px ; top : 3px ; background : url (images/down.png) no-repeat ; background - size : 15px auto ;} .menu .item.active ul{ display : block ;} .menu .item.active ul li.active p{ display : block ;} </style> </head> <body> <div class= "menu" > <div class= "item" > <h1>标题一<i></i></h1> <ul> <li>1<span class= "icon" ></span> <p>锋 科技 了束带结发历史的会计法落实到飞</p> </li> <li>2<span class= "icon" ></span> <p>锋科技了束带结发历史的会计法落实到飞</p> </li> <li>3<span class= "icon" ></span> <p>锋科技了束带结发历史的会计法落实到飞</p> </li> </ul> </div> <div class= "item" > <h1>标题二<i></i></h1> <ul> <li>1<span class= "icon" ></span> <p>锋科技了束带结发历史的会计法落实到飞</p> </li> <li>2<span class= "icon" ></span> <p>锋科技了束带结发历史的会计法落实到飞</p> </li> <li>3<span class= "icon" ></span> <p>锋科技了束带结发历史的会计法落实到飞</p> </li> </ul> </div> <div class= "item" > <h1>标题三<i></i></h1> <ul> <li>1<span class= "icon" ></span> <p>锋科技了束带结发历史的会计法落实到飞</p> </li> <li>2<span class= "icon" ></span> <p>锋科技了束带结发历史的会计法落实到飞</p> </li> <li>3<span class= "icon" ></span> <p>锋科技了束带结发历史的会计法落实到飞</p> </li> </ul> </div> </div> <script type= "text/javascript" src = "js/ jq uery-1.7.min.js" ></script> <script type= "text/javascript" > jQuery(function(){ $( '.menu .item' ). each (function(){ VAR flag=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 .item ul li' ).each(function(){ var flag=true; $(this).on( 'click' ,function(event){ event.p rev entDefault(); event.stop PR opagation(); if(flag){ $( '.menu ul li' ).removeClass( 'active' ); $(this).addClass( 'active' ); flag=false; }else{ $(this).removeClass( 'active' ); flag=true; } }); }); }); </script> </body> </html>
好了，本文内容到此结束， 希望对大家有所帮助 ！
总结
以上是 为你收集整理的 DIV点击折叠实例代码 全部内容，希望文章能够帮你解决 DIV点击折叠实例代码 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。