css+js实现手风琴下拉菜单效果

最新推荐文章于 2024-09-03 10:15:42 发布

你真的快乐吗

最新推荐文章于 2024-09-03 10:15:42 发布

阅读量1.9k

点赞数 4

分类专栏： JS css 文章标签： css javascript 前端

本文链接：https://blog.csdn.net/qq_42840755/article/details/123207006

版权

JS 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

css

2 篇文章 1 订阅

订阅专栏

本文通过HTML、CSS和JavaScript代码展示了如何创建一个手风琴式下拉菜单。首先展示了基本的HTML结构，然后逐步添加CSS样式以实现视觉效果，最后通过JavaScript实现点击事件来切换下拉菜单的显示与隐藏。代码简洁易懂，适合前端开发者学习和参考。

摘要由CSDN通过智能技术生成

想想到现在已经有一段时间没有更新了,前一段时间忙着面试,过一段时间我会把我的面试用来复习的面试题整理整理发出来

下面,我们来用css+js实现手风琴下拉菜单效果,话不多说,直接上代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>手风琴下拉菜单</title>
    <style>
    </style>
  </head>
  <body>
    <div class="accordion">
      <ul>
        <li class="masterwork">
          <span>四大名著</span>
          <ul class="xiala">
            <li>
              <span>《西游记》</span>
            </li>
            <li>
              <span>《红楼梦》</span>
            </li>
            <li>
              <span>《水浒传》</span>
            </li>
            <li>
              <span>《三国演义》</span>
            </li>
          </ul>
        </li>
        <li class="masterwork">
          <span>有关爱情名著</span>
          <ul class="xiala">
            <li>
              <span>《霍乱时期的爱情》</span>
            </li>
            <li>
              <span>《飘》</span>
            </li>
            <li>
              <span>《简·爱》</span>
            </li>
            <li>
              <span>《呼啸山庄》</span>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </body>
</html>

此时效果图如下
在这里插入图片描述
加上css代码

    <style>
      /* 去除所有标签的外边距内边距 */
      * {
        margin: 0;
        padding: 0;
      }
      .accordion {
        padding: 10px;
      }
      ul {
        background-color: aqua;
        width: 156px;
      }
      li {
        list-style: none;
        background-color: aqua;
      }
      span {
        display: inline-block;
        width: 150px;
        padding: 3px;
      }
      .masterwork > ul {
        display: none;
      }
    </style>

此时的效果如图
在这里插入图片描述
添加点击事件

<script>
    let click = document.querySelectorAll(".masterwork>span")
    for (const i in click) {
      click[i].onclick = function (e) {
        console.log(e.target) //检查是否获取到点击事件
        let xiala = click[i].parentNode.children[1].classList.value//获取对应的class吃否存在
        //判断class是否存在
        if (!xiala) {
          // 显示
          click[i].parentNode.children[1].classList.add("xiala")
        } else {
          // 隐藏
          click[i].parentNode.children[1].classList.remove("xiala")
        }
      }
    }
  </script>

效果如下视频

css+js手风琴

完整代码如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>手风琴下拉菜单</title>
    <style>
      /* 去除所有标签的外边距内边距 */
      * {
        margin: 0;
        padding: 0;
      }
      .accordion {
        padding: 10px;
      }
      ul {
        background-color: aqua;
        width: 156px;
      }
      li {
        list-style: none;
        background-color: aqua;
      }
      span {
        display: inline-block;
        width: 150px;
        padding: 3px;
      }
      .masterwork > .xiala {
        display: none;
      }
      .aaa {
        display: block !important;
      }
    </style>
  </head>
  <body>
    <div class="accordion">
      <ul>
        <li class="masterwork">
          <span>四大名著</span>
          <ul class="xiala">
            <li>
              <span>《西游记》</span>
            </li>
            <li>
              <span>《红楼梦》</span>
            </li>
            <li>
              <span>《水浒传》</span>
            </li>
            <li>
              <span>《三国演义》</span>
            </li>
          </ul>
        </li>
        <li class="masterwork">
          <span>有关爱情名著</span>
          <ul class="xiala">
            <li>
              <span>《霍乱时期的爱情》</span>
            </li>
            <li>
              <span>《飘》</span>
            </li>
            <li>
              <span>《简·爱》</span>
            </li>
            <li>
              <span>《呼啸山庄》</span>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </body>
  <script>
    let click = document.querySelectorAll(".masterwork>span")
    for (const i in click) {
      click[i].onclick = function (e) {
        console.log(e.target) //检查是否获取到点击事件
        let xiala = click[i].parentNode.children[1].classList.value
        console.log()
        if (!xiala) {
          // 显示
          click[i].parentNode.children[1].classList.add("xiala")
        } else {
          // 隐藏
          click[i].parentNode.children[1].classList.remove("xiala")
        }
      }
    }
  </script>
</html>