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

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:autobackground-color#fefefe;}   
  11.         .menu .item h1{ font-size:15pxwidth:100%; position:relative;}   
  12.         .menu .item h1 i{ displayinline-blockheight:15pxwidth:10pxposition:absoluterightright:10pxtop:0; backgroundurl(images/rightright.png) no-repeatbackground-size:10px auto;}   
  13.         .menu .item ul{ displaynone;}   
  14.         .menu .item ul li{ list-style:nonecolor:#000background-color#fefefeborder-bottom:solid 1px #edededline-height32pxwidth:100%; position:relative;}   
  15.         .menu .item ul li p{ displaynone;}           
  16.         .menu .item.active h1 i{ displayinline-blockheight:10pxwidth:15pxposition:absoluterightright:10pxtop:3pxbackgroundurl(images/down.png) no-repeatbackground-size:15px auto;}   
  17.         .menu .item ul li span.icon{displayinline-blockheight:15pxwidth:10pxposition:absoluterightright:10pxtop:0; backgroundurl(images/rightright.png) no-repeatbackground-size:10px auto;}   
  18.         .menu .item ul li.active span.icondisplayinline-blockheight:10pxwidth:15pxposition:absoluterightright:10pxtop:3pxbackgroundurl(images/down.png) no-repeatbackground-size:15px auto;}   
  19.         .menu .item.active ul{ displayblock;}   
  20.         .menu .item.active ul li.active p{ displayblock;}   
  21.        
  22.   
  23.   
  24.     "menu">   
  25.         "item">   
  26.             

    标题一

      
  27.             
-六神源码网