html+css+js实现手风琴/折叠效果

最新推荐文章于 2025-07-18 17:54:29 发布

原创最新推荐文章于 2025-07-18 17:54:29 发布 · 1.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #javascript

本文详细介绍了如何使用HTML、CSS和JavaScript来创建一个点击一级菜单展开或关闭二级菜单的手风琴效果。代码展示了如何动态控制列表项的高度以实现折叠效果，并包含了一个简单的JavaScript函数来管理菜单状态。

html+css+js实现手风琴/折叠效果右侧菜单

效果：点击一级菜单，打开二级菜单，再次点击一级菜单，二级菜单关闭；
点击一级菜单，其他一级菜单都是关闭效果
代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>手风琴效果</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        list-style: none;
      }
      li {
        width: 200px;
        height: 45px;
        text-align: center;
        line-height: 45px;
        background: rgb(51, 92, 153);
        color: white;
        font-weight: bold;
        transition: all 0.3s;
        cursor: pointer;
        border-bottom: 1px solid whitesmoke;
        overflow: hidden;
      }
      a {
        text-decoration: none;
        color: white;
      }
      .subMenu li {
        background: rgb(144, 149, 255)
      }
    </style>
  </head>
  <body>
      <ul>
        <li onclick="openMenu(this)">
          <a href="#">首页</a>
        </li>
        <li onclick="openMenu(this)">
          <a href="#">新闻</a>
          <ul class="subMenu">
            <li>
              <a href="#">子菜单1</a>
            </li>
            <li>
              <a href="#">子菜单2</a>
            </li>
            <li>
              <a href="#">子菜单3</a>
            </li>
          </ul>
        </li>
        <li class="tst" onclick="openMenu(this)">
          <a href="#">技术支持</a>
          <ul class="subMenu">
            <li>
              <a href="#">子菜单1</a>
            </li>
            <li>
              <a href="#">子菜单2</a>
            </li>
          </ul>
        </li>
        <li onclick="openMenu(this)">
          <a href="#">关于我们</a>
          <ul class="subMenu">
            <li>
              <a href="#">子菜单1</a>
            </li>
          </ul>
        </li>
      </ul>
    <script>
      function  openMenu(obj) {
          // 获取页面中所有li
          let liAll=document.getElementsByTagName("li");
          // 点击一级li获得二级li的个数
          let num=obj.getElementsByTagName("li").length;
          // 点击一级菜单，显示二级菜单，再次点击，关闭二级菜单
          if(obj.style.height=="45px"||obj.style.height==""){
            obj.style.height=45*(num+1)+"px";
          }else if(obj.style.height!="45px"){
            obj.style.height="45px";
          }
          // 点击自己，同级关闭二级菜单
          for(let i=0;i<liAll.length;i++){
            if(obj!=liAll[i]){
                liAll[i].style.height="45px";
            }
          }
        }
    </script>
  </body>
</html>

效果：

html+css+js实现手风琴折叠效果展示