首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

DIV点击折叠实例代码

所属分类： 网页制作 / CSS 阅读数： 1598
收藏 0 赞 0 分享

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

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>  

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

更多精彩内容其他人还在看

CSS教程:CSS命名参考

在XHTML中定义ID、CLASSS都用得上，主要是方面CSS定义样式时能一眼看穿。所以，CSS命名仅作参考。 (1)页面结构类 容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：na
收藏 0 赞 0 分享

CSS教程:控制网页文件大小通过精简CSS实现

尽管对于现如今的带宽来说，网页文件那仅以K来算的大小实在是微不足道，但如何将这以K来计算的网页文件精简到最小还是网页设计师们所应该考虑的问题之一。 众所周之，在不影响整个网页构架与功能的情况下，网页文件越小越好，因为更小的网页文件有利于浏览器对网页的解释
收藏 0 赞 0 分享

CSS教程:关于文字溢出问题的研究

首先引起对这个溢出问题进行研究是因为看到一个朋友的帖子，里面提到ie7下出现的文字溢出问题； 于是又重新翻了以前怿飞斑竹的帖子，他提到的是注释引起的文字溢出问题，我今天看的时候发现在ie7下并没有产生多猪的问题(以前我没有装ie7，所以没有测试)，今天看到这个新
收藏 0 赞 0 分享

符合web标准的嵌入Flash的方法

　　常有网友提问，如何让网页中嵌入的Flash标签也符合web标准。目前还没有一个完美的解决办法，这篇文章中，我们将Flash嵌入标签写入js文件中，通过变量传递参数的办法来回避不符合标准的标签。 　　请注意，这只是一个变通的方法，换汤不换药，并未能最终解决存在的
收藏 0 赞 0 分享

学习WEB标准必备的四项技能

今天在群里，熊猫君提议整理一个帖子，一方面为初学者提供一个入门指南，另一方面也象借此和已经在从事这个行业进行一点交流。下面是我从事这个行当多年的一些经验总结，希望抛砖引玉，大家不吝赐教。 １、必备工具 其实web标准并不是很复杂的技术，实现web标准的工具
收藏 0 赞 0 分享

CSS对表格单元格强制换行和不换行

CSS控制Table单元格强制换行与强制不换行 　　我们知道Div的换行和不换行的css写法。但对于表格单元格只知道一个属性nowrap可以使其不换行。 　　近日有此需要，但发现加上nowrap在某些情况下还是会换行！无奈，没有一个强制不换行的方法吗？ 　　用C
收藏 0 赞 0 分享

CSS制作符合网站标准的细线表格

css教程：实现符合Web标准的细线表格 　　随着应用CSS网页布局构建网页， 　　以及web标准的广泛普及与发展， 　　表格渐渐被人们遗忘， 　　但是表格还是有它优秀的一面， 　　数据处理用表格的确省了不少麻烦！ 　　这个是细表格的代码，并且通过了标准验证！ tab
收藏 0 赞 0 分享

区分IE6,IE7和firefox的CSS hack

这篇文章主要为介绍了CSS小技巧之有效区分IE6,IE7,Firefox，需要的朋友可以参考下
收藏 0 赞 0 分享

CSS教程:用dl dt dd来制作列表

　　今天有人发邮件问的一个问题,最开始的想法是用ul列表来实现;但是这样用出现两个比较麻烦的地方： 　　1、如果用UL还布局，右边一栏比较麻烦； 　　2、文字外边的边框自适应比较麻烦； 　　3、很可能要定死高度； 　　所以，细细地看一看这个布局，想一想还是用DL.DT.DD作
收藏 0 赞 0 分享

性感的CSS菜单(Menus)

当你需要一个简单易用的导航菜单得时候。CSSMenu是个不错的选择。相对于Flash/Javascript，他们小巧轻便，而且方便使用。当然，他们也能做出很多很漂亮的效果。 CssMenuExample 这里有几个专门收集CSS导航菜单的站点，其中有很多优秀的作品。也许能给
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22