Bootstrap 跳转到折叠面板内的链接答案

【问题标题】：Bootstrap jump to link inside a collapsed panelBootstrap 跳转到折叠面板内的链接
【发布时间】：2016-12-19 16:16:49
【问题描述】：

所以我有一个引导面板，其中嵌套了另一个面板（有点像书籍布局，每个部分都有部分，然后是章节，两个级别都可折叠）。我正在尝试为内部面板（章节名称）提供 href，但如果该部分当前已折叠，则浏览器不会滚动到该点。

<div class="accordian" id="accordion1">
 <!-- Multiple such sections -->
  <div class="panel panel-default">
    <div class="panel-heading">
      <h2 class="panel-title top-heading" data-toggle="collapse" data-parent="#accordion1" href="#collapse1">
          Section 1
      </h2>
    </div>
    <div id="collapse1" class="panel-collapse collapse in subsection">
     <!-- Each section has multiple chapters -->
      <div class="panel-body">
        <div class="panel-group" id="subaccordion1">

          <!-- Panel for chapter 1 -->
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title chapter-name" data-toggle="collapse" data-parent="#subaccordion1" href="#collapse1InnerOne1">
                <!-- The above link works when the panels are all expanded but not when they are collapsed. How to get it to work all the time? -->
                 Chapter 1
              </h4>
            </div>
            <div id="collapse1InnerOne1" class="panel-collapse collapse in">
              <div class="panel-body">
                <ul>
                  Chapter 1 content
                </ul>
              </div>
            </div>
          </div>

          <!-- Panel for chapter 2 -->
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title chapter-name" data-toggle="collapse" data-parent="#subaccordion1" href="#collapse1InnerOne2">
                 Chapter 2
              </h4>
            </div>
            <div id="collapse1InnerOne2" class="panel-collapse collapse in">
              <div class="panel-body">
                <ul>
                  Chapter 2 content
                </ul>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
  <!-- Panel for section 2 with chap 2&3 etc -->

#collapse1InnerOne1 链接在面板打开时有效，但在面板折叠时无效。如何让它在这两种情况下工作？谢谢。

【问题讨论】：

只有当元素在页面中可见时，本机的滚动到锚点支持才有效。您可以使用opacity:0; height:0 作为解决方法。
您能详细说明一下吗？我应该把这些属性放在哪里？
你不能用 Bootstraps 的类来做这个。您需要处理自己的课程。具有opacity:1; height:auto 和opacity:0; height:0; 并分别切换它们。

标签： javascript css twitter-bootstrap

【解决方案1】：

这可能对你有帮助..check Collapsible Group Item #2

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  

<div class="panel-group" id="accordion1">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">Collapsible Group Item #1
                        </a>
                    </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in">
                    <div class="panel-body">Panel 1</div>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">Collapsible Group Item #2
                        </a>
                    </h4>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse">
                    <div class="panel-body">
                        <div class="panel-body">
                            <h2>Heading</h2>
                            <div class="panel-group" id="accordion21">
                                <div class="panel">
                                    <a data-toggle="collapse" data-parent="#accordion21" href="#collapseTwoOne">View details 2.1 &raquo;
                                    </a>
                                    <div id="collapseTwoOne" class="panel-collapse collapse">
                                        <div class="panel-body">Details 1</div>
                                    </div>
                                </div>
                                <div class="panel ">
                                    <a data-toggle="collapse" data-parent="#accordion21" href="#collapseTwoTwo">View details 2.2 &raquo;
                                    </a>
                                    <div id="collapseTwoTwo" class="panel-collapse collapse">
                                        <div class="panel-body">Details 2</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion1" href="#collapseThree">Collapsible Group Item #3
                        </a>
                    </h4>
                </div>
                <div id="collapseThree" class="panel-collapse collapse">
                    <div class="panel-body">

                        <div class="panel-group" id="accordion2">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion2" href="#collapseThreeOne">Collapsible Group Item #3.1
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapseThreeOne" class="panel-collapse collapse in">
                                    <div class="panel-body">Panel 3.1</div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion2" href="#collapseThreeTwo">Collapsible Group Item #3.2
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapseThreeTwo" class="panel-collapse collapse">
                                    <div class="panel-body">Panel 3.2</div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>

【讨论】：

正如 Ohgodwhy 提到的，我认为简单的引导组件无法实现这一点（没有一些自定义 javascript）。我正在为此编写自己的 css/js，但是如果您有某种方法可以让引导程序按预期工作，我会很高兴知道它:)