js实现手风琴菜单|二级菜单

Suchen_upup

已于 2022-05-20 17:16:18 修改

阅读量721

点赞数 5

分类专栏：前端文章标签： javascript 前端开发语言

于 2022-05-20 16:48:16 首次发布

本文链接：https://blog.csdn.net/yu132944732/article/details/124886280

版权

这篇博客详细介绍了如何使用JavaScript来创建一个手风琴菜单，特别是关注于二级菜单的交互功能。通过点击，菜单项可以展开或关闭，且同一时间仅允许一个二级菜单展开。

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

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>
    ul,
    li {
   
      margin: 0;
      padding: 0;
      list-style: none;
    }

    body {
   
      display: flex;
      justify-content: center;
      padding-top: 40px;
    }

    .menuOne>li {
   
      text-align: center;
      width: 200px;
      line-height: 40px;
      background-color: aqua;
      border: 1px solid #eaeaea;
      cursor: pointer;