ブートストラップが折りたたまれたパネル内のリンクにジャンプする

私はブートストラップパネルの中に別のパネルを入れ子にしています（ブックレイアウトのようなもの、各セクション内のチャプタ、両方のレベルの折り畳み可能なもの）。インナーパネル（チャプタ名）に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リンクそれらが折りたたまれたときにパネルが開いているではないときに動作します。どちらの場合でもそれを稼働させるにはどうすればいいですか？おかげさまで

出典

2016-12-19 sudshekhar

スクロールに役立ちますように。 'opacity：0;を使うことができます。高さ：0 'を回避する。 – Ohgodwhy

それについて詳しく教えてもらえますか？私はそれらの属性をどこに置くべきですか？ – sudshekhar

これをネイティブにブートストラップのクラスで行うことはできません。独自のクラスを処理する必要があります。不透明度：1を持つもの。 height：auto'と 'opacity：0;高さ：0;とそれぞれトグルします。 – Ohgodwhy

は、この要素がページ内に表示されているときのみ動作し、ネイティブのサポートを固定するyou..check折りたたみグループ商品番号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>

出典

2016-12-19 08:16:49

Ohgodwhyが言及したように、私は単純なブートストラップコンポーネントがこれを（いくつかのカスタムJavaScriptなしで）達成できるとは思わない。私は自分のcss/jsを書いていますが、ブートストラップを希望どおりに動作させる方法があれば、それについて知ってうれしいです:) – sudshekhar

ブートストラップが折りたたまれたパネル内のリンクにジャンプする

答えて

関連する問題