手风琴的实现

最新推荐文章于 2024-09-18 09:27:08 发布

苍岚王

最新推荐文章于 2024-09-18 09:27:08 发布

阅读量161

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html 文章标签： servlet java html

本文链接：https://blog.youkuaiyun.com/q2432315767/article/details/126498396

html 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用HTML、CSS和JavaScript实现手风琴效果，包括关键代码展示、动画过渡效果的实现，并提及jQuery的slidedown等方法作为替代方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

无论横向还是竖向，逻辑都是一样的,先上图

上代码

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <div class="w">
           <button >我点你一下咋了</button>
           <div class="size">你不能点我的</div>

           <button >我点你一下咋了</button>
           <div class="size">你不能点我的</div>

           <button >我点你一下咋了</button>
           <div class="size">你不能点我的</div>

       </div>

       <script>
           var btn=document.getElementsByTagName("button")
           var size=document.getElementsByClassName("size")
           for(var i=0;i<btn.length;i++){
               btn[i].index=i
               btn[i].onclick=function(){

                   for(var y=0;y<btn.length;y++){
                       size[y].style.height=0+"px"
                       btn[y].className=""
                   }
                   console.log(11);
                   size[this.index].style.height=100+"px"
                   this.className="ccg"

               }


           }


       </script>



       <style>
           *{
               margin: 0 ;
               padding: 0 ;
           }
           .w{
               width: 800px;
               /* height: 600px; */
               border:1px solid red ;
               margin: 100px auto;
           }
           .w button{
               height: 100px;
               width: 800px;
               border:0 ;
               background-color: aqua;
           }
           .w .ccg{
               background-color: red;
           }
           .w button:hover{
               background-color: red;
               cursor: pointer;
           }
           .w .size{
           padding: 0 18px;
           background-color: white;
           /* max-height: 0; */
           text-align: center;
           line-height: 100px;
           background-color: green;
           height: 0px;
           overflow: hidden;
           transition: height 0.2s ease-out;
           }


       </style>
   </body>
</html>