您的位置：首页 > Web前端 > > 正文

怎么给div添加按下去效果（DIV点击折叠实例代码）

更多 时间：2022-01-20 00:57:16 类别：Web前端 浏览量：2826

怎么给div添加按下去效果

DIV点击折叠实例代码

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

  • CSS Code复制内容到剪贴板
    1. <!doctype html>    
    2. <html>    
    3. <head>    
    4.     <meta charset="utf-8">    
    5.     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">   
    6.     <title>测试</title>    
    7.     <style type="text/css">   
    8.         *{ margin:0; padding:0;}   
    9.         .menu{ width:100%;}   
    10.         .menu .item{ width:100%; height:auto; background-color: #fefefe;}   
    11.         .menu .item h1{ font-size:15px; width:100%; position:relative;}   
    12.         .menu .item h1 i{ display: inline-block; height:15px; width:10px; position:absolute; rightright:10px; top:0; background: url(images/rightright.jpg" alt="怎么给div添加按下去效果（DIV点击折叠实例代码）" border="0" />no-repeat; background-size:10px auto;}   
    13.         .menu .item ul{ display: none;}   
    14.         .menu .item ul li{ list-style:none; color:#000; background-color: #fefefe; border-bottom:solid 1px #ededed; line-height: 32px; width:100%; position:relative;}   
    15.         .menu .item ul li p{ display: none;}           
    16.         .menu .item.active h1 i{ display: inline-block; height:10px; width:15px; position:absolute; rightright:10px; top:3px; background: url(images/down.jpg" alt="怎么给div添加按下去效果（DIV点击折叠实例代码）" border="0" />no-repeat; background-size:15px auto;}   
    17.         .menu .item ul li span.icon{display: inline-block; height:15px; width:10px; position:absolute; rightright:10px; top:0; background: url(images/rightright.jpg" alt="怎么给div添加按下去效果（DIV点击折叠实例代码）" border="0" />no-repeat; background-size:10px auto;}   
    18.         .menu .item ul li.active span.icon{ display: inline-block; height:10px; width:15px; position:absolute; rightright:10px; top:3px; background: url(images/down.jpg" alt="怎么给div添加按下去效果（DIV点击折叠实例代码）" border="0" />no-repeat; background-size:15px auto;}   
    19.         .menu .item.active ul{ display: block;}   
    20.         .menu .item.active ul li.active p{ display: block;}   
    21.     </style>   
    22. </head>   
    23. <body>   
    24.     <li class="menu">   
    25.         <li class="item">   
    26.             <h1>标题一<i></i></h1>   
    27.             <ul>   
    28.                 <li>1<span class="icon"></span>   
    29.                     <p>锋科技了束带结发历史的会计法落实到飞</p>   
    30.                 </li>   
    31.                 <li>2<span class="icon"></span>   
    32.                     <p>锋科技了束带结发历史的会计法落实到飞</p>   
    33.                 </li>   
    34.                 <li>3<span class="icon"></span>   
    35.                     <p>锋科技了束带结发历史的会计法落实到飞</p>   
    36.                 </li>   
    37.             </ul>   
    38.         </li>   
    39.         <li class="item">   
    40.             <h1>标题二<i></i></h1>   
    41.             <ul>   
    42.                 <li>1<span class="icon"></span>   
    43.                     <p>锋科技了束带结发历史的会计法落实到飞</p>   
    44.                 </li>   
    45.                 <li>2<span class="icon"></span>   
    46.                     <p>锋科技了束带结发历史的会计法落实到飞</p>   
    47.                 </li>   
    48.                 <li>3<span class="icon"></span>   
    49.                     <p>锋科技了束带结发历史的会计法落实到飞</p>   
    50.                 </li>   
    51.             </ul>   
    52.         </li>   
    53.         <li class="item">   
    54.             <h1>标题三<i></i></h1>   
    55.             <ul>   
    56.                 <li>1<span class="icon"></span>   
    57.                     <p>锋科技了束带结发历史的会计法落实到飞</p>   
    58.                 </li>   
    59.                 <li>2<span class="icon"></span>   
    60.                     <p>锋科技了束带结发历史的会计法落实到飞</p>   
    61.                 </li>   
    62.                 <li>3<span class="icon"></span>   
    63.                     <p>锋科技了束带结发历史的会计法落实到飞</p>   
    64.                 </li>   
    65.             </ul>   
    66.         </li>   
    67.     </li>   
    68.     <script type="text/javascript" src="js/jquery-1.7.min.js"></script>   
    69.     <script type="text/javascript">   
    70.         jQuery(function(){   
    71.             $('.menu .item').each(function(){   
    72.                 var flag=true;   
    73.                 $(this).find('h1').on('click',function(){   
    74.                     if(flag){   
    75.                         $('.menu .item').removeClass('active');   
    76.                         $(this).parent('.item').addClass('active');                           
    77.                         flag=false;   
    78.                     }else{   
    79.                         $(this).parent('.item').removeClass('active');   
    80.                         flag=true;   
    81.                     }   
    82.                 });   
    83.             });   
    84.             $('.menu .item ul li').each(function(){       
    85.                 var flag=true;               
    86.                 $(this).on('click',function(event){   
    87.                     event.preventDefault();   
    88.                     event.stopPropagation();   
    89.                     if(flag){   
    90.                         $('.menu ul li').removeClass('active');   
    91.                         $(this).addClass('active');   
    92.                         flag=false;   
    93.                     }else{   
    94.                         $(this).removeClass('active');   
    95.                         flag=true;   
    96.                     }                                   
    97.                 });   
    98.             });   
    99.         });   
    100.     </script>   
    101. </body>   
    102. </html>  

    • 怎么给div添加按下去效果（DIV点击折叠实例代码）

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

    标签：DIV 折叠
  • 上一篇：使用docker对集群进行管理（使用docker搭建kong集群操作）
  • 下一篇：css3轮播案例（纯CSS3实现图片无间断轮播效果）
    • 您可能感兴趣
    首页 编程学习 Web前端 数据库 软件设计
    开心学习 ©2013-2021 保留所有权利