正如您在下面的代码片段中看到的，当我单击菜单图标时，显示/隐藏动画正确完成，但这不适用于元素的内容。
此外，当“active-menu”类附加到菜单时，“item”类正确地应用了 display: grid 属性，但是一旦它关闭了元素的内容，就好像不再考虑它一样作为菜单的直接子项但直接作为容器的子项，这是错误的。
我不清楚问题出在哪里，所以我需要你的建议(我希望我解释清楚了)
let topBar = document.getElementById("tobBar");
let menu = document.getElementById("menu");
ico.addEventListener('click', (e) => {
ico.classList.toggle("toggle-color");
menu.classList.toggle("active-menu");
})body {
background-color: #eee;
}
.container {
width: 370px;
height: 550px;
background: darkgray;
z-index: -2;
margin: 0 auto;
border-radius: 20px;
}
/* * * TOP BAR * * */
.top-bar {
height: 50px;
width: 100%;
background: #00b0ff;
display: flex;
align-items: center;
z-index: 999;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
.top-bar-ico {
width: 50px;
text-align: center;
cursor: pointer;
z-index: 999;
}
.toggle-color {
color: white;
}
/* * * * * */
/* * * MENU * * */
.menu {
height: 500px;
transition: 0.5s linear;
width: 0;
z-index: 999;
display: flex;
flex-direction: column;
padding: 0 5px;
}
.active-menu {
width: 90%;
background: #00b0ff;
z-index: 999;
border-bottom-left-radius: inherit;
}
.active-menu > * {
background-color: white;
}
/* * * * * */
/* * * MENU ITEMS * * */
.menu > .item {
height: 50px;
}
.item:not(:first-child) {
margin-top: 10px;
}
.item {
display: grid;
grid-template-columns: 50px 1fr;
grid-gap: 5px;
}
/* * * * * */<html>
<head>
<script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
</head>
<body>
<div class="container">
<div class="top-bar">
<div id="ico" class="top-bar-ico">
<i class="fa fa-coffee"></i>
</div>
<div class="top-bar-title">
<p>Click the icon</p>
</div>
</div>
<div id="menu" class="menu">
<div id="menuItem" class="item">
<div class="item-icon">
<i class="fa fa-coffee"></i>
</div>
<div class="item-title">
Menu item
</div>
<div class="item-text">
lalalala
</div>
</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</div>
</body>
</html>最佳答案
您需要将overflow:hidden设置为.menu。见下文:
let topBar = document.getElementById("tobBar");
let menu = document.getElementById("menu");
ico.addEventListener('click', (e) => {
ico.classList.toggle("toggle-color");
menu.classList.toggle("active-menu");
})body {
background-color: #eee;
}
.container {
width: 370px;
height: 550px;
background: darkgray;
z-index: -2;
margin: 0 auto;
border-radius: 20px;
}
/* * * TOP BAR * * */
.top-bar {
height: 50px;
width: 100%;
background: #00b0ff;
display: flex;
align-items: center;
z-index: 999;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
.top-bar-ico {
width: 50px;
text-align: center;
cursor: pointer;
z-index: 999;
}
.toggle-color {
color: white;
}
/* * * * * */
/* * * MENU * * */
.menu {
height: 500px;
transition: 0.5s linear;
width: 0;
z-index: 999;
display: flex;
flex-direction: column;
overflow-x:hidden;
}
.active-menu {
width: 90%;
padding: 0 5px;
background: #00b0ff;
z-index: 999;
border-bottom-left-radius: inherit;
}
.active-menu>* {
background-color: white;
}
/* * * * * */
/* * * MENU ITEMS * * */
.menu>.item {
height: 50px;
}
.item:not(:first-child) {
margin-top: 10px;
}
.item {
display: grid;
grid-template-columns: 50px 1fr;
grid-gap: 5px;
}
/* * * * * */<html>
<head>
<script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
</head>
<body>
<div class="container">
<div class="top-bar">
<div id="ico" class="top-bar-ico">
<i class="fa fa-coffee"></i>
</div>
<div class="top-bar-title">
<p>Click the icon</p>
</div>
</div>
<div id="menu" class="menu">
<div id="menuItem" class="item">
<div class="item-icon">
<i class="fa fa-coffee"></i>
</div>
<div class="item-title">
Menu item
</div>
<div class="item-text">
lalalala
</div>
</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</div>
</body>
</html>关于javascript - 在菜单上隐藏动画不适用于其所有子项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48152636/