使用bootstrap scrollspy为崩溃的div,到附加的侧边栏 [英] Using bootstrap scrollspy for a div with collapse, to an affixed sidebar
问题描述
我将此代码作为页面的布局。 span9 div包含应该应用scrollspy的部分。每个部分都是一组包含实际内容的可折叠div。 span3 div是附加的侧边栏,必须使用scrollspy突出显示正确的项目。
I have this code as the layout of the page. The span9 div cotains sections that should apply the scrollspy. Each section is a set of collapsible divs that contains the actual content. The span3 div is the affixed sidebar and must highlight the correct item using the scrollspy.
<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的内容时,会突出显示侧边栏中的下一个项目。
The problem is that when i collapse the div to show the content, the scrollspy won't recognize the newly occupied space by that collapsible div. and thus highlights the next items in the sidebar when I scroll through the content of that collapsible div.
我想要的是当rolllspy'看到'空格时可折叠div扩展。真的很感激任何帮助。点击这里获取小提琴。
What i want is for the scrollspy to 'see' the space when the collapsible div is expanded. Any help would really be appreciated. Click here for the fiddle.
推荐答案
你应该打电话给 .scrollspy('refresh')
:
$(document).ready(function () {
$('.accordion').on('shown hidden', function () {
$('body').scrollspy('refresh');
});
});
这篇关于使用bootstrap scrollspy为崩溃的div,到附加的侧边栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!