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

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

2021-09-13 1268人已围观

简介 本文给大家带来一段核心代码关于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.             
        
    •                 
    • 1"icon">   
    •                     

      锋科技了束带结发历史的会计法落实到飞

        
    •                 
      •   
    •                 
    • 2"icon">   
    •                     

      锋科技了束带结发历史的会计法落实到飞

        
    •                 
      •   
    •                 
    • 3"icon">   
    •                     

      锋科技了束带结发历史的会计法落实到飞

        
    •                 
      •   
    •             
      
  28.         
  
  •         "item">   
  •             

    标题二

      
  •             
        
    •                 
    • 1"icon">   
    •                     

      锋科技了束带结发历史的会计法落实到飞

        
    •                 
      •   
    •                 
    • 2"icon">   
    •                     

      锋科技了束带结发历史的会计法落实到飞

        
    •                 
      •   
    •                 
    • 3"icon">   
    •                     

      锋科技了束带结发历史的会计法落实到飞

        
    •                 
      •   
    •             
      
  •         
    •   
  •         "item">   
  •             

    标题三

      
  •             
        
    •                 
    • 1"icon">   
    •                     

      锋科技了束带结发历史的会计法落实到飞

        
    •                 
      •   
    •                 
    • 2"icon">   
    •                     

      锋科技了束带结发历史的会计法落实到飞

        
    •                 
      •   
    •                 
    • 3"icon">   
    •                     

      锋科技了束带结发历史的会计法落实到飞

        
    •                 
      •   
    •   &#

      上一篇：DIV始终浮动在页面底部_Div+CSS教程_CSS_网页制作_

      下一篇：CSS3实现跳动的动画效果_css3_CSS_网页制作_

    • 相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网