脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > Div+CSS教程 >

DIV点击折叠实例代码

  发布时间：2016-08-31 09:28:12   作者：佚名   我要评论
本文给大家带来一段核心代码关于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.png) 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.png) 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.png) 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.png) 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.     <div class="menu">   
  25.         <div 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.         </div>   
  39.         <div 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.         </div>   
  53.         <div 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.         </div>   
  67.     </div>   
  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中img,span垂直居中的问题

    下面小编就为大家带来一篇关于div中img,span垂直居中的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-26

  • 解决img在div中居中的问题

    下面小编就为大家带来一篇解决img在div中居中的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-26

  • html5实现适用于手机端的div图片放大预览效果源码

    这是一款html5实现适用于手机端的div图片放大预览效果源码，共有4种不同的图片放大预览模式可供用户选择使用。可分别针对鼠标滑过、拖拽、点击等进行图片放大显示
    2016-09-21

  • DIV+CSS实现带三角箭头的提示框

    本文给大家带来一段代码基于div+css实现三角形提示框，代码简单易懂，需要的朋友可以参考下
    2016-09-20

  • div被iframe遮住的几种情况及解决方法

    这篇文章给大家介绍了div被iframe遮住的一些情况，以及被遮住后的解决办法，有需要的朋友们可以参考借鉴。
    2016-09-07

  • DIV始终浮动在页面底部

    在页面底部浮动功能是如何实现的呢？下面小编给大家带来div始终浮动在页面底部的关键代码，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
    2016-08-30

  • 设置一个DIV块固定在屏幕中央的两种方法(推荐)

    下面小编就为大家带来一篇设置一个DIV块固定在屏幕中央的两种方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-25

  • CSS设置DIV垂直居中的N种方法 兼容IE浏览器

    这篇文章主要为大家详细介绍了兼容IE浏览器CSS设置DIV垂直居中的N种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-07-05

  • CSS文本和div垂直居中方法总结

    这篇文章主要介绍了CSS文本和div垂直居中方法总结，包括多行文本垂直居中,单行文本垂直居中,子div垂直居中，感兴趣的小伙伴们可以参考一下
    2016-07-04

  • CSS控制DIV层显示和隐藏的实现方法

    本文给大家带来了CSS控制DIV层显示和隐藏的方法，是前端学习必须要掌握的基础知识，非常不错，具有参考借鉴价值，感兴趣的小伙伴一起学习吧
    2016-07-01

最新评论

关注微信公众号

扫一扫