您现在的位置是：网站首页> 编程资料编程资料

DIV点击折叠实例代码_Div+CSS教程_CSS_网页制作_

2023-11-10 158人已围观

简介 本文给大家带来一段核心代码关于div点击折叠效果，代码简单易懂，有需要的朋友可以参考下

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

CSS Code复制内容到剪贴板
  1.     
  2.     
  3.     
  4.     "utf-8">    
  5.     content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">   
  6.     测试    
  7.     "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.        
  22.   
  23.   
  24.     "menu">   
  25.         "item">   
  26.             

    标题一

      
  27.             

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网