3

ページのレイアウトとしてこのコードがあります。span9 div には、scrollspy を適用するセクションが含まれています。各セクションは、実際のコンテンツを含む折りたたみ可能な div のセットです。span3 div は添付のサイドバーであり、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 のコンテンツをスクロールすると、サイドバーの次の項目が強調表示されます。

私が欲しいのは、折りたたみ可能なdivが展開されたときにscrollspyがスペースを「見る」ことです。どんな助けでも本当に感謝します。フィドルについては、ここをクリックしてください。

4

1 に答える 1

6

あなたは呼び出す必要があります.scrollspy('refresh')：

$(document).ready(function () {

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

});
于 2013-06-27T09:11:19.853 に答える