標簽內的Bootstrap手風琴
[英]Bootstrap Accordion inside Tabs
問題描述
為了示例，我創建了兩個選項卡（Tab1，Tab2）。 每個選項卡下都有手風琴。 兩個選項卡中的手風琴的行為並不完全相同。 在tab1下，如果我展開一個手風琴，所有其他手風琴會自動折疊，但是對於tab2，如果我展開一個手風琴，它不會折疊其他展開的手風琴。 我需要像Tab1中那樣的行為。
以下是HTML和CSS中的最少代碼：
ul { margin: 0; padding: 0; list-style: none; } .nav li { border-bottom: 1px solid #eee; } .nav li a { font-size: 14px; } #accordionMenu { max-width: 750px; } .panel-body { padding: 0; } .panel-group .panel+.panel { margin-top: 0; border-top: 0; } .panel-group .panel { border-radius: 0; } .panel-default>.panel-heading { color: #333; background-color: #fff; border-color: #e4e5e7; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .panel-default>.panel-heading a { display: block; padding: 10px 15px; text-decoration: none; font-size: 14px; } .panel-default>.panel-heading a:after { content: ""; position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; float: right; transition: transform .25s linear; -webkit-transition: -webkit-transform .25s linear; } .panel-default>.panel-heading a[aria-expanded="true"] { background-color: #eee; } .panel-default>.panel-heading a[aria-expanded="true"]:after { content: "\\e113"; } .panel-default>.panel-heading a[aria-expanded="false"]:after { content: "\\e114"; }
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/leaflet.css"> <link rel="stylesheet" type="text/css" href="css/leaflet-logo.css"> <script src="https://cdn.jsdelivr.net/npm/vega@4.4.0"></script> <script src="https://cdn.jsdelivr.net/npm/vega-lite@3.0.0-rc12"></script> <script src="https://cdn.jsdelivr.net/npm/vega-embed@3.29.1"></script> <script type="text/javascript" src="js/uikit.js"></script> <script type="text/javascript" src="js/leaflet.js"></script> <script type="text/javascript" src='js/leaflet-logo.js'></script> <script type="text/javascript" src='js/fespoint.js'></script> <script type="text/javascript" src="js/fes.js"></script> <script type="text/javascript" src='js/d3.v5.min.js'></script> <script type="text/javascript" src='data/data3.js'></script> <script type="text/javascript" src='js/color.js'></script> </head> <body> <div id="exTab2" style="padding: 40px;"> <ul class="nav nav-tabs"> <li class="active"> <a href="#1" data-toggle="tab">Tab1</a> </li> <li><a href="#2" data-toggle="tab">Tab2</a> </li> </ul> <div class="tab-content "> <div class="tab-pane active" id="1"> <div> <div class="panel-group" id="accordionMenu" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> MenuA </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <ul class="nav"> <li><a href="#">ItemA</a></li> <li><a href="#">Item B</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> menu B </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> <ul class="nav"> <li><a href="#" id="A1a">ItemA1 </a></li> <li><a href="#" id="A1b">Item B2</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Menu C </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> <ul class="nav"> <li><a href="#">B1 </a></li> <li><a href="#">B2 </a></li> <li><a href="#">B3 </a></li> <li><a href="#">B4 </a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingsix"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapsesix" aria-expanded="false" aria-controls="collapsesix"> Menu D </a> </h4> </div> <div id="collapsesix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingsix"> <div class="panel-body"> <ul class="nav"> <li><a href="#">A11</a></li> <li><a href="#">A12</a></li> <li><a href="#">A13</a></li> <li><a href="#">A2</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="tab-pane" id="2"> <div> <div class="panel-group" id="accordionMenu" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading1"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapse1" aria-expanded="true" aria-controls="collapse1"> Menu 0 </a> </h4> </div> <div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1"> <div class="panel-body"> <ul class="nav"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading2"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapse2" aria-expanded="false" aria-controls="collapse2"> Menu 1 </a> </h4> </div> <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2"> <div class="panel-body"> <ul class="nav"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> <li><a href="#">item 4</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading3"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapse3" aria-expanded="false" aria-controls="collapse3"> Menu 2 </a> </h4> </div> <div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3"> <div class="panel-body"> <ul class="nav"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> <li><a href="#">item 4</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading4"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapse4" aria-expanded="false" aria-controls="collapse4"> Menu 3 </a> </h4> </div> <div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading4"> <div class="panel-body"> <ul class="nav"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
1 個解決方案
解決方案1
1 已采納 2019-03-20 14:09:08
兩個手風琴都使用相同的id="accordionMenu" ，確保每個id="accordionMenu"都有不同的ID，並且此ID正確反映在它們各自項目的data-parent屬性上
ul { margin: 0; padding: 0; list-style: none; } .nav li { border-bottom: 1px solid #eee; } .nav li a { font-size: 14px; } #accordionMenu { max-width: 750px; } .panel-body { padding: 0; } .panel-group .panel+.panel { margin-top: 0; border-top: 0; } .panel-group .panel { border-radius: 0; } .panel-default>.panel-heading { color: #333; background-color: #fff; border-color: #e4e5e7; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .panel-default>.panel-heading a { display: block; padding: 10px 15px; text-decoration: none; font-size: 14px; } .panel-default>.panel-heading a:after { content: ""; position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; float: right; transition: transform .25s linear; -webkit-transition: -webkit-transform .25s linear; } .panel-default>.panel-heading a[aria-expanded="true"] { background-color: #eee; } .panel-default>.panel-heading a[aria-expanded="true"]:after { content: "\\e113"; } .panel-default>.panel-heading a[aria-expanded="false"]:after { content: "\\e114"; }
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/leaflet.css"> <link rel="stylesheet" type="text/css" href="css/leaflet-logo.css"> <script src="https://cdn.jsdelivr.net/npm/vega@4.4.0"></script> <script src="https://cdn.jsdelivr.net/npm/vega-lite@3.0.0-rc12"></script> <script src="https://cdn.jsdelivr.net/npm/vega-embed@3.29.1"></script> <script type="text/javascript" src="js/uikit.js"></script> <script type="text/javascript" src="js/leaflet.js"></script> <script type="text/javascript" src='js/leaflet-logo.js'></script> <script type="text/javascript" src='js/fespoint.js'></script> <script type="text/javascript" src="js/fes.js"></script> <script type="text/javascript" src='js/d3.v5.min.js'></script> <script type="text/javascript" src='data/data3.js'></script> <script type="text/javascript" src='js/color.js'></script> </head> <body> <div id="exTab2" style="padding: 40px;"> <ul class="nav nav-tabs"> <li class="active"> <a href="#1" data-toggle="tab">Tab1</a> </li> <li><a href="#2" data-toggle="tab">Tab2</a> </li> </ul> <div class="tab-content "> <div class="tab-pane active" id="1"> <div> <div class="panel-group" id="accordionMenu" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> MenuA </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <ul class="nav"> <li><a href="#">ItemA</a></li> <li><a href="#">Item B</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> menu B </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> <ul class="nav"> <li><a href="#" id="A1a">ItemA1 </a></li> <li><a href="#" id="A1b">Item B2</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Menu C </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> <ul class="nav"> <li><a href="#">B1 </a></li> <li><a href="#">B2 </a></li> <li><a href="#">B3 </a></li> <li><a href="#">B4 </a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingsix"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapsesix" aria-expanded="false" aria-controls="collapsesix"> Menu D </a> </h4> </div> <div id="collapsesix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingsix"> <div class="panel-body"> <ul class="nav"> <li><a href="#">A11</a></li> <li><a href="#">A12</a></li> <li><a href="#">A13</a></li> <li><a href="#">A2</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="tab-pane" id="2"> <div> <div class="panel-group" id="accordionMenu2" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading1"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordionMenu2" href="#collapse1" aria-expanded="true" aria-controls="collapse1"> Menu 0 </a> </h4> </div> <div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1"> <div class="panel-body"> <ul class="nav"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading2"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu2" href="#collapse2" aria-expanded="false" aria-controls="collapse2"> Menu 1 </a> </h4> </div> <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2"> <div class="panel-body"> <ul class="nav"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> <li><a href="#">item 4</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading3"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu2" href="#collapse3" aria-expanded="false" aria-controls="collapse3"> Menu 2 </a> </h4> </div> <div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3"> <div class="panel-body"> <ul class="nav"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> <li><a href="#">item 4</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading4"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu2" href="#collapse4" aria-expanded="false" aria-controls="collapse4"> Menu 3 </a> </h4> </div> <div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading4"> <div class="panel-body"> <ul class="nav"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
Bootstrap手風琴選項卡不折疊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.