使用引導滾動的div與崩潰，添加到側邊欄

我有這個代碼作爲頁面的佈局。 span9 div cotains應該應用scrollspy的部分。每個部分都是一組包含實際內容的可摺疊div。 span3 div是加貼的側邊欄，並且必須使用滾動條突出顯示正確的項目。使用引導滾動的div與崩潰，添加到側邊欄

<div class="span3 module-sidebar"> 
    <ul id="sidebar" data-spy="affix" data-offset="250" data-offset-bottom="0" class="nav nav-list bs-docs-sidenav affix"> 
     <li> 
      <a href="#module1"><i class="icon-chevron-right"></i>Module1 Name</a> 
     </li> 
    </ul> 
</div> 

<div class="span9" data-spy="scroll" data-target="#sidebar"> 
    <section id="module1"> 
     <div class="page-header"> 
      <h1>Module1 Name</h1> 
     </div> 

     <div class="bs-docs-example"> 
      <div class="accordion" id="accordion2"> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> 
         <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#function1">Function1 Name</a> 
        </div> 
        <div id="function1" class="accordion-body collapse in"> 
         <div class="accordion-inner"> 
         <h3>Topic1 Name</h3> 
         <p>Topic1 Desc</p>        
          <h4>SubTopic1 Name</h4> 
          <p>SubTopic1 Desc</p>         
           <h4><img src="../assets/img/manuals/module1/function1/step1.png"/></h4> 
           <p>Step1 Desc</p> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </section> 
</div>

的問題是，當我崩潰的div來顯示內容時，scrollspy不會由可摺疊的DIV識別新佔用的空間。並在滾動可摺疊div的內容時突出顯示邊欄中的下一個項目。

我想要的是當可摺疊div展開時，Scrollspy'看見'空間。任何幫助真的會被讚賞。點擊here作爲小提琴。

來源

2013-06-27 Messy Coder

你可以創建一個測試案例？ – Pavlo

什麼測試用例？我怎樣才能做到這一點？ –

測試案例在您的問題的工作演示。你可以使用http://jsfiddle.net/或http://codepen.io/pen/。這樣人們可以看到你的問題，並嘗試各種解決方案。 – Pavlo

你應該叫.scrollspy('refresh')：

$(document).ready(function() { 

    $('.accordion').on('shown hidden', function() { 
     $('body').scrollspy('refresh'); 
    }); 

});

來源

2013-06-27 09:11:19 Mati

非常感謝！那樣做了！ –

使用引導滾動的div與崩潰，添加到側邊欄

回答

相關問題