Question

所以我有一个自举面板嵌入其中的另一个面板（有点像书籍布局，每个部分内有部分和章节，两个级别都可折叠）。我正在尝试为内部面板（章节名称）提供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链接有效，但折叠时无效。在这两种情况下如何使它工作？感谢。

Answer 1

可能这有助于你..检查可折叠组项目＃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>

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

1 个答案: