javascript - 选项卡内的 Bootstrap Accordion

标签 javascript bootstrap-tabs bootstrap-accordion

为了举例，我创建了两个选项卡(Tab1、Tab2)。每个选项卡下都有 Accordion 。两个选项卡内的 Accordion 行为并不完全相同。在 tab1 下，如果我展开 Accordion ，所有其他 Accordion 都会自动折叠，但是，对于 tab2，如果我展开 Accordion ，它不会折叠已展开的其他 Accordion 。我需要 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>

最佳答案

两个 Accordion 都使用相同的 id="accordionMenu" ，确保每个都有不同的 id，并且这些 id 正确反射(reflect)在 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>

关于javascript - 选项卡内的 Bootstrap Accordion ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55262483/

上一篇：javascript - 而不是 html 标签显示 $$typeof : Symbol(react. 元素)？

下一篇：javascript - 如何将 if/else 转换为三元 if/else

相关文章：

Javascript - event.stopPropagation() 不能在 BS4 Accordion 上从 parent 到 child 工作

javascript - 将原型(prototype)代码转换为 JQuery

javascript - 描述关键字 let、const 和 var 的术语是什么？

javascript - 悬停时的 Bootstrap 选项卡带有可点击的链接

html - Bootstrap 3 选项卡无法正确切换事件状态

twitter-bootstrap - Bootstrap 4 Accordion 100% 高度 (h-100)

jquery - 使用不同的按钮打开/关闭 Bootstrap Accordion

javascript - 如何防止某些事件的按键默认设置，然后再次恢复默认设置

javascript - 如何在 html/javascript 中使用 dom 检索图像的大小？

javascript - 在 BootStrap 选项卡中添加动态选项卡

©2024 IT工具网  联系我们