在菜单上隐藏动画不适用于其所有子项
Hide animation on menu doesn't apply to all its children
正如您在下面的代码片段中看到的,当我单击菜单图标时,显示/隐藏动画正确完成,但这不适用于项目的内容。
此外,当 class 'active-menu' 附加到菜单时,'item' class 正确应用显示:网格 属性,但作为一旦它关闭,项目的内容就不再被视为菜单的直接子项,而是容器的直接子项,这是错误的。
我不清楚问题出在哪里,所以我需要你的建议(希望我解释清楚了)
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>
正如您在下面的代码片段中看到的,当我单击菜单图标时,显示/隐藏动画正确完成,但这不适用于项目的内容。
此外,当 class 'active-menu' 附加到菜单时,'item' class 正确应用显示:网格 属性,但作为一旦它关闭,项目的内容就不再被视为菜单的直接子项,而是容器的直接子项,这是错误的。
我不清楚问题出在哪里,所以我需要你的建议(希望我解释清楚了)
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>