创建可折叠导航栏

Question

我想制作一个主可折叠导航栏，将包含其他导航栏（可折叠）。 我有一个，但我无法制作一个主可折叠导航栏，其中包含可折叠的导航栏。 就像在这段代码中一样，我将'Profile'作为一个可折叠栏，并希望将'navigation'作为另一个可折叠的，它将包含'Profile'导航栏

我试过编辑下面的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
希望有所帮助！