Question

我要制作一个可折叠的主导航栏，将要包含其他导航栏（可折叠）。我有一个，但是我无法制作一个包含该可折叠导航栏的主可折叠导航栏。像这段代码一样，我将“配置文件”设置为一个可折叠的栏，并希望将“导航”设置为另一个可折叠的栏，其中包含“配置文件”的导航栏

我尝试编辑以下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>

我想创建一个可折叠的导航栏，其中将包含另一个可折叠的导航栏。

示例：如果单击导航栏，则它将打开一个导航栏，该导航栏也会折叠。

Answer 1

一种方法是使用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
希望有帮助！

创建可折叠导航栏

1 个答案: