隐藏动画侧边栏中的子菜单

Question

我正试图使用CSS和JS创建一个动画侧边栏，但我在隐藏子菜单方面遇到了问题(演示中为绿色(。因此，子菜单应该像现在一样慢慢弹出，但只有当父菜单<li>悬停时。目前，他们总是在场。此外，悬停的<li>下方的列表项应适当下移。在这种情况下，当"事务"悬停时，事务子菜单应缓慢出现并占用空间，因此"预算"会相应下移。我尝试过display: none;和display: block;，但我读到动画在display属性上不起作用，无法使其发挥作用，我真的很想保留动画。我也尝试过visibility，但失败了，不值一提。

document.addEventListener('DOMContentLoaded', () => {
let listItems = document.querySelectorAll('nav > ul > li');
function onListItemClick() {
for (let listItem of listItems) {
listItem.classList.remove('active');
listItem.children[0].classList.remove('dot');
if (listItem.children.length > 2) {
listItem.children[2].style.display = 'none';
}
}
this.classList.add('active');
this.children[0].classList.add('dot');
if (this.children.length > 2) {
this.children[2].style.display = 'block';
}
}
listItems.forEach(function(listItem) {
listItem.addEventListener('click', onListItemClick);
});
});

.sidebar {
background-color: #F2F2F2;
width: 300px;
height: 100%;
position: fixed;
font-family: sans-serif;
}
.sidebar>nav>ul {
list-style: none;
line-height: 2em;
padding: 0;
margin: 10em 0 0 0;
}
.sidebar>nav>ul>li {
display: grid;
grid-template-columns: 25px 1fr;
color: #959595;
font-size: 18px;
}
.sidebar>nav>ul>li>span:nth-child(1) {
margin-left: 3em;
}
.sidebar>nav>ul>li>span:nth-child(2) {
padding: 0.5em 0 0.5em 3em;
}
.sidebar>nav>ul>li:hover {
color: #757575;
font-weight: bold;
cursor: pointer;
}
.sidebar>nav>ul>li>ul {
z-index: 9;
position: absolute;
list-style: none;
padding: 0;
margin: 0;
width: 300px;
transform: translateY(0);
transition: all 0.5 ease;
}
.sidebar>nav>ul>li:hover>ul {
transform: translateY(30%);
transition: all 0.5s ease;
}
.sidebar>nav>ul>li>ul>li {
display: block;
box-sizing: border-box;
background-color: #33ad93;
font-size: 14px;
width: 100%;
font-weight: normal;
padding: 0 0 0 5.5em;
}
.sidebar>nav>ul>li>ul>li:first-child {
padding: 0.5em 0 0 5.5em;
}
.sidebar>nav>ul>li>ul>li:last-child {
padding: 0 0 0.5em 5.5em;
}
.sidebar>nav>ul>li>ul>li:not(:first-child):not(:last-child) {
padding: 0.15em 0 0.15em 5.5em;
}
.sidebar>nav>ul>li>ul>li>a {
color: white;
}
.sidebar>nav>ul>li>span>a {
color: #959595;
text-decoration: none;
}
.dot {
border-radius: 50%;
background-color: #33ad93;
width: 10px;
height: 10px;
display: inline-block;
margin: auto;
}
.active {
color: black !important;
font-weight: bold;
}

<div class="sidebar">
<nav>
<ul>
<li class=" active ">
<span class=" dot "></span>
<span><a href="/dashboard/">Dashboard</a></span>
</li>
<li class="">
<span class=""></span>
<span>Transactions</span>
<ul>
<li><a href="/transactions/create/">New Transaction</a></li>
<li>View Transactions</li>
</ul>
</li>
<li class="">
<span class=""></span>
<span>Budgets</span>
</li>
</ul>
</nav>
</div>

我该如何克服这个问题？

Answer 1

我做了一些小的更改，似乎可以实现您想要的：

.sidebar > nav > ul > li > ul {
z-index: 9;
/*position: absolute;  *removed*/
height: 0; /*added*/
list-style: none;
padding: 0;
margin: 0;
width: 300px;
/*transform: translateY(0);  *removed*/
/*transition: all 0.5 ease;  *removed*/
overflow-y: hidden; /*added*/
}
.sidebar > nav > ul > li:hover > ul {
/*transform: translateY(30%);  *removed*/
height: 80px; /*added*/
transition: height 0.5s ease; /*modified*/
}
.sidebar > nav > ul > li > ul > li {
height: 40px; /*added*/
display: block;
box-sizing: border-box;
background-color: #33ad93;
font-size: 14px;
width: 100%;
font-weight: normal;
padding: 0 0 0 5.5em;
}

因此，我为每个新下拉列表项添加了一个静态高度为40px，然后将容器设置为80px。然后我们转换高度，而不是Y位置。如果您希望它相对于元素数量是动态的，不幸的是，它不如使用height: 100%而不是height: 80px那么容易(您需要使用一些javascript来动态设置相对于列表项数量的高度；它仍然可以工作，但转换会稍微中断(。

希望这能给你一个想法

Answer 2

您刚刚错过了默认ul上的转换单元。

这里是更新的代码

document.addEventListener('DOMContentLoaded', () => {
let listItems = document.querySelectorAll('nav > ul > li');
function onListItemClick() {
for (let listItem of listItems) {
listItem.classList.remove('active');
listItem.children[0].classList.remove('dot');
if (listItem.children.length > 2) {
listItem.children[2].style.display = 'none';
}
}
this.classList.add('active');
this.children[0].classList.add('dot');
if (this.children.length > 2) {
this.children[2].style.display = 'block';
}
}
listItems.forEach(function(listItem) {
listItem.addEventListener('click', onListItemClick);
});
});

.sidebar {
background-color: #F2F2F2;
width: 300px;
height: 100%;
position: fixed;
font-family: sans-serif;
}
.sidebar > nav > ul {
list-style: none;
line-height: 2em;
padding: 0;
margin: 10em 0 0 0;
}
.sidebar > nav > ul > li {
display: grid;
grid-template-columns: 25px 1fr;
color: #959595;
font-size: 18px;
}
.sidebar > nav > ul > li > span:nth-child(1) {
margin-left: 3em;
}
.sidebar > nav > ul > li > span:nth-child(2) {
padding: 0.5em 0 0.5em 3em;
}
.sidebar > nav > ul > li:hover {
color: #757575;
font-weight: bold;
cursor: pointer;
}
.sidebar > nav > ul > li > ul {
z-index: 0;
height: 0px;
overflow-y: hidden;
list-style: none;
padding: 0;
margin: 0;
width: 300px;
transform: translateY(0);
transition: all 0.5s linear;
}
.sidebar > nav > ul > li:hover > ul {
height: 100%;
transform: translateY(0);
}
.sidebar > nav > ul > li > ul > li {
display: block;
box-sizing: border-box;
background-color: #33ad93;
font-size: 14px;
width: 100%;
font-weight: normal;
padding: 0 0 0 5.5em;
}
.sidebar > nav > ul > li > ul > li:first-child {
padding: 0.5em 0 0 5.5em;
}
.sidebar > nav > ul > li > ul > li:last-child {
padding: 0 0 0.5em 5.5em;
}
.sidebar > nav > ul > li > ul > li:not(:first-child):not(:last-child) {
padding: 0.15em 0 0.15em 5.5em;
}
.sidebar > nav > ul > li > ul > li > a {
color: white;
text-decoration: none;
}
.sidebar > nav > ul > li > ul > li > a:hover {
text-decoration: underline;
}
.sidebar > nav > ul > li > span > a {
color: inherit;
text-decoration: none;
}
.dot {
border-radius: 50%;
background-color: #33ad93;
width: 10px;
height: 10px;
display: inline-block;
margin: auto;
}
.active {
color: black !important;
font-weight: bold;
}

<div class="sidebar">
<nav>
<ul>
<li class=" active ">
<span class=" dot "></span>
<span><a href="/dashboard/">Dashboard</a></span>
</li>
<li class="">
<span class=""></span>
<span>Transactions</span>
<ul>
<li><a href="/transactions/create/">New Transaction</a></li>
<li>View Transactions</li>
</ul>
</li>
<li class="">
<span class=""></span>
<span>Budgets</span>
</li>
</ul>
</nav>
</div>

Answer 3

您可能需要查看CSS边栏上的w3schools W3.CSS Framework页面。

下面的片段是使用该框架的一个示例。然后，您可以根据自己的风格进行调整。

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<div class="w3-sidebar w3-bar-block w3-light-grey w3-card">
<a href="#" class="w3-bar-item w3-button">Dashboard</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Transactions
<span style="font-size:12px;padding-bottom:2px">&#9660;</span>
</button>
<div class="w3-dropdown-content w3-bar-block" style="box-shadow: 0 0.25em 0.5em #00000040;">
<a href="#" class="w3-bar-item w3-button">New Transaction</a>
<a href="#" class="w3-bar-item w3-button">View Transactions</a>
</div>
</div>
<a href="#" class="w3-bar-item w3-button">Budgets</a>
</div>