请将此侧边菜单设为动态答案

【问题标题】：Please make this side menu dynamic请将此侧边菜单设为动态
【发布时间】：2022-01-12 00:40:24
【问题描述】：

StackOverflow 的好人今天向大家问好！

请帮帮我！！！

我用 HTML 和 CSS 编写了一段代码，但我被困在了这一点上……

下面是 HTML...

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="../fontawesome-free-5.13.0-web/css/all.min.css" />
    <link rel="stylesheet" href="./style.css" />
    <title>dashboard</title>
</head>

<body>
    <aside class="sidebar">
        <span class="fas fa-chevron-right"></span>
        <menu>
            <li><a href=""><span class="fas fa-user"></span><span>dashboard</span></a></li>
            <li>
                <a href=""><span class="fas fa-user"></span><span>posts</span><span class="fas fa-chevron-up"></span></a>
                <menu>
                    <li><a href="">category posts</a></li>
                    <li><a href="">subcategory posts</a></li>
                    <li><a href="">minicategory posts</a></li>
                </menu>
            </li>
            <li>
                <a href=""><span class="fas fa-user"></span><span>sections extra</span><span class="fas fa-chevron-up"></span></a>
                <menu>
                    <li><a href="">debate</a></li>
                    <li><a href="">extensions</a></li>
                </menu>
            </li>
            <li>
                <a href=""><span class="fas fa-user"></span><span>users</span><span class="fas fa-chevron-up"></span></a>
                <menu>
                    <li><a href="">banned users</a></li>
                    <li><a href="">queried users</a></li>
                    <li><a href="">all users</a></li>
                </menu>
            </li>
            <li>
                <a href=""><span class="fas fa-user"></span><span>media</span><span class="fas fa-chevron-up"></span></a>
                <menu>
                    <li><a href="">big picture</a></li>
                    <li><a href="">add new page</a></li>
                </menu>
            </li>
            <li><a href=""><span class="fas fa-user"></span><span>inbox</span></a></li>
            <li>system</li>
            <li><a href=""><span class="fas fa-user"></span><span>broadcast</span></a></li>
            <li><a href=""><span class="fas fa-user"></span><span>view traffic board</span></a></li>
            <li>
                <a href=""><span class="fas fa-user"></span><span>mini admin</span><span class="fas fa-chevron-up"></span></a>
                <menu>
                    <li><a href="">view mini admin</a></li>
                    <li><a href="">register mini admin</a></li>
                    <li><a href="">remove mini admin</a></li>
                </menu>
            </li>
            <li>
                <a href=""><span class="fas fa-user"></span><span>moderators</span><span class="fas fa-chevron-up"></span></a>
                <menu>
                    <li><a href="">view moderators</a></li>
                    <li><a href="">register moderators</a></li>
                    <li><a href="">remove moderators</a></li>
                </menu>
            </li>
            <li><a href=""><span class="fas fa-user"></span><span>ads management</span></a></li>
            <li><a href=""><span class="fas fa-user"></span><span>settings</span></a></li>
        </menu>
    </aside>
</body>

</html>

最后，这是 CSS...

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}

aside{
    font-family: 'Helvetica';
    background-color: #ecf0f3;
    width: 200px;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
    height: 100vh;
    box-shadow: -3px -3px 7px #ffffff,3px 3px 5px #ceced1,inset -3px -3px 7px #ffffff,inset 3px 3px 5px #ceced1;
}

aside::-webkit-scrollbar{
    width: 5px;
    /* helps remove scrollbar which resizes or shifts list items - webkit browsers only */
    display: none;
}


aside menu{
    white-space: nowrap;
    width: 100%;
    text-transform: capitalize;
    font-size: 14px;
}

aside > span.fa-chevron-right{
    font-size: 25px;
    padding-left: 10px;
    margin-bottom: 20px;
    margin-top: 20px;
    cursor: pointer;
}

aside menu li{
    /* BLOCK AVAILABLE FOR ENTRY */
}

aside menu li:not(aside menu li menu li){
    width: 100%;
    margin-top: 10px;
    padding-right: 10px;
}

aside menu li:not(:last-of-type){
    /* BLOCK AVAILABLE FOR ENTRY */
}

aside menu li a{
    display: block;
    width: 100%;
    position: relative;
    padding-left: 10px;
    height: 30px;
    line-height: 30px;
}

aside menu li a:not(aside menu li menu li a){
    box-shadow: -3px -3px 7px #ffffff,3px 3px 5px #ceced1;
    position: relative;
}

aside menu li a:not(aside menu li menu li a):hover::before,
aside menu li a:not(aside menu li menu li a):focus::before{
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: inset -3px -3px 7px #ffffff,inset 3px 3px 5px #ceced1;
}

aside menu li a:not(aside menu li menu li a):hover::before,
aside menu li a:not(aside menu li menu li a):focus::before{
    border-radius: 6px;
}

aside menu li a:not(aside menu li menu li a):hover{
    color: #3498db;
}

aside menu li a span.fas{
    padding: 0 10px 0 0;
}

aside menu li menu{
    width: 100%;
}

aside menu li menu li{
    /* BLOCK AVAILABLE FOR ENTRY */
}

aside menu li menu li a{
    width: 100%;
    padding-left: 30px;
}

aside menu li menu li a:hover{
    background-color: #dfdfdf;
    color: #444;
}

aside span.fa-chevron-up{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}

实际上我需要一些我认为可以使用 JavaScript 部署的特定动态功能，这看起来像是一件完成的工作。所以这就是我想要实现的目标......

首先：

我希望每个子菜单默认隐藏或关闭。

其次：

我希望所选菜单链接显示子菜单（以平滑的滑动下拉格式），并且旁边的箭头图标应该向下旋转（表示子菜单处于活动状态或打开状态）。当再次单击相同的链接时，它应该关闭子菜单（也以平滑的格式）并且 ARROW ICON 应该恢复正常。

第三：（现在这是有趣的部分。）

一次只能打开一个子菜单！！！也就是说，打开一个子菜单后，只有在以下情况下才必须关闭；

再次单击相同的菜单链接或
单击了另一个菜单链接（- 在当前链接关闭时打开）

（有点像一次只显示一个内容的平滑过渡手风琴，现在你明白了。）

还要注意：

ACTIVE 或 OPENED 子菜单的 ARROW ICON 必须向下旋转，并带有过渡和
任何 INACTIVE 或 CLOSED 子菜单的 ARROW ICON 必须旋转，过渡，恢复正常

哦，我忘了！

当您将鼠标悬停在菜单链接上时，您会注意到文本变为蓝色的效果，并且新形态样式有点像按下的按钮。对于活动菜单，也请让它与悬停菜单链接时完全一样。而当菜单链接处于非活动状态或关闭状态时，让它恢复正常状态。

提前谢谢你！！！

附：我用 FontAwesome 做图标：D

【问题讨论】：

标签： javascript html css menu submenu

【解决方案1】：

我相信这就是你要找的。p>

有一点 javascript 和 css。 Js 删除所有 li 元素 .active 类，并仅在事件触发时切换到单击的元素。

在 Css 中只为旋转和高度动画添加了过渡。

const menuItems = document.querySelectorAll('aside > menu > li > a');

const deactivate = target => target.parentNode.classList.remove('active');
const toggle =  target => target.parentNode.classList.toggle('active');

menuItems.forEach(menu => {
  menu.addEventListener('click', function(e){
    e.preventDefault();
    menuItems.forEach(element => element.isEqualNode(menu)? toggle(element): deactivate(element));
  });
});

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}

aside{
    font-family: 'Helvetica';
    background-color: #ecf0f3;
    width: 200px;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
    height: 100vh;
    box-shadow: -3px -3px 7px #ffffff,3px 3px 5px #ceced1,inset -3px -3px 7px #ffffff,inset 3px 3px 5px #ceced1;
}

aside::-webkit-scrollbar{
    width: 5px;
    /* helps remove scrollbar which resizes or shifts list items - webkit browsers only */
    display: none;
}


aside menu{
    white-space: nowrap;
    width: 100%;
    text-transform: capitalize;
    font-size: 14px;
}

aside > span.fa-chevron-right{
    font-size: 25px;
    padding-left: 10px;
    margin-bottom: 20px;
    margin-top: 20px;
    cursor: pointer;
}

aside menu li{
    /* BLOCK AVAILABLE FOR ENTRY */
}

aside menu li:not(aside menu li menu li){
    width: 100%;
    margin-top: 10px;
    padding-right: 10px;
}

aside menu li:not(:last-of-type){
    /* BLOCK AVAILABLE FOR ENTRY */
}

aside menu li a{
    display: block;
    width: 100%;
    position: relative;
    padding-left: 10px;
    height: 30px;
    line-height: 30px;
}

aside menu li a:not(aside menu li menu li a){
    box-shadow: -3px -3px 7px #ffffff,3px 3px 5px #ceced1;
    position: relative;
}

aside menu li a:not(aside menu li menu li a):hover::before,
aside menu li a:not(aside menu li menu li a):focus::before{
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: inset -3px -3px 7px #ffffff,inset 3px 3px 5px #ceced1;
}

aside menu li a:not(aside menu li menu li a):hover::before,
aside menu li a:not(aside menu li menu li a):focus::before{
    border-radius: 6px;
}

aside menu li.active a:not(aside menu li menu li a),
aside menu li a:not(aside menu li menu li a):hover{
    color: #3498db;
}

aside menu li a span.fas{
    padding: 0 10px 0 0;
}

aside menu li menu{
    width: 100%;
}

aside menu li menu li{
    /* BLOCK AVAILABLE FOR ENTRY */
}

aside menu li menu li a{
    width: 100%;
    padding-left: 30px;
}

aside menu li menu li a:hover{
    background-color: #dfdfdf;
    color: #444;
}

aside span.fa-chevron-right:not(aside > span.fa-chevron-right){
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}


/* extra style */


aside > menu > li > menu {
  transition: max-height 400ms;
  max-height: 0;
  overflow: hidden;
}

aside > menu > li.active > menu{
  max-height: 300px;
}

aside > menu > li > a > span:nth-child(2)::after{
  transition: transform 300ms ease-out;
  content: '▶';
  display: inline-block;
  transform: rotate(0);
}

aside > menu > li.active a > span:nth-child(2)::after{
  transform: rotate(90deg);
}

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="../fontawesome-free-5.13.0-web/css/all.min.css" />
    <link rel="stylesheet" href="./style.css" />
    <title>sidemenu</title>
</head>

<body>
    <aside class="sidebar">
        <span class="fas fa-chevron-right"></span>
        <menu>
            <li><a href="#"><span class="fas fa-user"></span><span>dashboard</span></a></li>
            <li>
                <a href="#"><span class="fas fa-user"></span><span>posts</span><span class="fas fa-chevron-right"></span></a>
                <menu>
                    <li><a href="#">category posts</a></li>
                    <li><a href="#">subcategory posts</a></li>
                    <li><a href="#">minicategory posts</a></li>
                </menu>
            </li>
            <li>
                <a href="#"><span class="fas fa-user"></span><span>sections extra</span><span class="fas fa-chevron-right"></span></a>
                <menu>
                    <li><a href="#">debate</a></li>
                    <li><a href="#">extensions</a></li>
                </menu>
            </li>
            <li>
                <a href="#"><span class="fas fa-user"></span><span>users</span><span class="fas fa-chevron-right"></span></a>
                <menu>
                    <li><a href="#">banned users</a></li>
                    <li><a href="#">queried users</a></li>
                    <li><a href="#">all users</a></li>
                </menu>
            </li>
            <li>
                <a href="#"><span class="fas fa-user"></span><span>media</span><span class="fas fa-chevron-right"></span></a>
                <menu>
                    <li><a href="#">big picture</a></li>
                    <li><a href="#">add new page</a></li>
                </menu>
            </li>
            <li><a href="#"><span class="fas fa-user"></span><span>inbox</span></a></li>
            <li>system</li>
            <li><a href="#"><span class="fas fa-user"></span><span>broadcast</span></a></li>
            <li><a href="#"><span class="fas fa-user"></span><span>view traffic board</span></a></li>
            <li>
                <a href="#"><span class="fas fa-user"></span><span>mini admin</span><span class="fas fa-chevron-right"></span></a>
                <menu>
                    <li><a href="#">view mini admin</a></li>
                    <li><a href="#">register mini admin</a></li>
                    <li><a href="#">remove mini admin</a></li>
                </menu>
            </li>
            <li>
                <a href="#"><span class="fas fa-user"></span><span>moderators</span><span class="fas fa-chevron-right"></span></a>
                <menu>
                    <li><a href="#">view moderators</a></li>
                    <li><a href="#">register moderators</a></li>
                    <li><a href="#">remove moderators</a></li>
                </menu>
            </li>
            <li><a href="#"><span class="fas fa-user"></span><span>ads management</span></a></li>
            <li><a href="#"><span class="fas fa-user"></span><span>settings</span></a></li>
            <strong>test</strong>
        </menu>
    </aside>
</body>

【讨论】：

@Matt 如果这有帮助，请将其标记为正确答案。
嗯……你真是个天才！
不过，我有点希望 FontAwesome 图标成为过渡的图标。请删除箭头伪元素。除了这一切，其他一切都还好。
我再说一遍……你是天才！
按照您的指示，我已使它看起来合适。谢谢美人 @n1md7 ！谢谢漂亮！