我想制作一个主可折叠导航栏是将包含其他导航栏(可折叠)。我有一个，但我无法制作一个包含该可折叠导航栏的主可折叠导航栏。 就像在这段代码中一样，我将“个人资料”作为一个可折叠栏，并希望将“导航”作为另一个包含“个人资料”导航栏的可折叠栏
我尝试编辑下面的 CSS:
.menu {
border-radius: 8px;
position: relative;
}
I have tried to add: .menu {
border-radius: 8px;
position: relative;
overflow: hidden;
transition: max-height 0.3s;
max-height: 0;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title></title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
</head>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
list-style: none;
text-decoration: none;
}
.menu {
border-radius: 8px;
position: relative;
}
.btn-nav {
display: block;
padding: 16px 20px;
background: #333;
color: white;
font-size: 2em;
}
.item {
border-top: 1px solid #2980b9;
overflow: hidden;
}
.btn {
display: block;
padding: 16px 20px;
background: #3498db;
color: white;
position: relative;
}
.btn:before {
content: "";
position: absolute;
width: 14px;
height: 14px;
background: #3498db;
left: 20px;
bottom: -7px;
transform: rotate(45deg);
}
.btn i {
margin-right: 10px;
}
.smenu {
background: #333;
overflow: hidden;
transition: max-height 0.3s;
max-height: 0;
}
.smenu a {
display: block;
padding: 16px 26px;
color: white;
font-size: 14px;
margin: 4px 0;
position: relative;
}
.smenu a:before {
content: "";
position: absolute;
width: 6px;
height: 100%;
background: #3498db;
left: 0;
top: 0;
transition: 0.3s;
opacity: 0;
}
.smenu a:hover:before {
opacity: 1;
}
.item:target .smenu {
max-height: 10em;
}
</style>
<body>
<div class="container">
<a class="btn-nav" href="#">Navigation</a>
<div class="menu">
<li class="item" id='profile'>
<a href="#profile" class="btn"><i class="far fa-user" </i>Profile</a>
<div class="smenu">
<a href="#">Posts</a>
<a href="#">Picture</a>
</div>
</li>
</div>
</div>
</body>
</html>我想创建一个可折叠的导航栏，它将包含另一个可折叠的导航栏。
示例:如果您单击导航栏，则会打开一个导航栏，该导航栏也是可折叠的。
最佳答案
一种方法是使用 Bootstrap 折叠:
.menu {
border-radius: 8px;
position: relative;
}
* {
margin: 0;
padding: 0;
font-family: sans-serif;
list-style: none;
text-decoration: none;
}
.menu {
border-radius: 8px;
position: relative;
}
.btn-nav {
display: block;
padding: 16px 20px;
background: #333;
color: white;
font-size: 2em;
}
.item {
border-top: 1px solid #2980b9;
overflow: hidden;
}
.btn {
display: block;
padding: 16px 20px;
background: #3498db;
color: white;
position: relative;
}
.btn:before {
content: "";
position: absolute;
width: 14px;
height: 14px;
background: #3498db;
left: 20px;
bottom: -7px;
transform: rotate(45deg);
}
.btn i {
margin-right: 10px;
}
.smenu {
background: #333;
overflow: hidden;
transition: max-height 0.3s;
max-height: 0;
}
.smenu a {
display: block;
padding: 16px 26px;
color: white;
font-size: 14px;
margin: 4px 0;
position: relative;
}
.smenu a:before {
content: "";
position: absolute;
width: 6px;
height: 100%;
background: #3498db;
left: 0;
top: 0;
transition: 0.3s;
opacity: 0;
}
.smenu a:hover:before {
opacity: 1;
}
.item:target .smenu {
max-height: 10em;
}<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" href="#collapse1" class="btn-nav" href="#">Navigation</a>
</div>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<li class="item" id='profile'>
<a href="#profile" class="btn btn-primary"><i class="far fa-user" </i>Profile</a>
<div class="smenu">
<a href="#">Posts</a>
<a href="#">Picture</a>
</div>
</li>
</div>
</div>
</div>
</div>
</div>来源:https://www.w3schools.com/bootstrap/bootstrap_collapse.asp
希望对您有所帮助!
关于html - 创建可折叠的导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56477282/