Question

我正在使用Bootstrap scrollspy作为垂直菜单。菜单中有一些标题，每个标题都是页面中的div。

滚动间谍工作正常，但是当用户展开某个部分以查看更多信息时会出现问题。使用ng-show完成展开和折叠。当该部分展开时，滚动间谍将不会指向正确的元素。

我搜索了一个解决方案，但所有这些都没有用，我认为是因为它们是动态地向DOM添加元素，而我在显示和隐藏元素方面存在问题。

Here is an image to demonstrate the problem.

滚动菜单条形码：

<div class="col-sm-2" style="padding-left: 0px; padding-right: 0px;">
<div  id="sidebar" class="bs-docs-sidebar hidden-print" role="complementary" style="padding-left: 0px;">
    <ul class="nav bs-docs-sidenav" >
        <li>
            <a href="#pc">Program Committee</a>
            <ul class="nav" >
                <li><a href="#bigdata">Big Data, Business Intelligence, Analytics</a></li>
                <li><a href="#soa">BPM, Web Services, SOA</a></li>
                <li><a href="#cloud">Cloud and Distributed Computing</a></li>
                <li><a href="#elearning">E-Learning, M-Learning</a></li>
                <li><a href="#hpc">High Performance Computing</a></li>
                <li><a href="#interoperability">Interoperability and Future Internet Technologies</a></li>
                <li><a href="#ir">IR, Data and Knowledge Management</a></li>
                <li><a href="#multimedia">Multimedia, Computer Vision and Image Processing</a></li>
                <li><a href="#networking">Networking, Sensor Networks, Mobile Computing</a></li>
                <li><a href="#nlp">Natural Language Processing</a></li>
                <li><a href="#security">Security, Privacy</a></li>
                <li><a href="#social-computing">Social Computing </a></li>
            </ul>
        </li>
    </ul>
</div>

章节代码有ng-click和ng-show：

<div id="bigdata" class="bs-callout bs-callout-warning" ng-click="show_bigdata=(show_bigdata+1)%2">
    <h3>Big Data, Business Intelligence, Analytics</h3>
</div>
<div id="show_bigdata"  ng-show="show_bigdata">
    <h4 class="page-header">Track Chairs</h4>
    <ul>
        <li><i class="icon-chevron-sign-right"> </i>Ahmed Mike, New Mexico Tech, USA 
        </li>
        <li><i class="icon-chevron-sign-right"> </i>Mohamed Mokbel, University of Minnesota, USA 
        </li>
    </ul>
    <h4 class="page-header">PC Members</h4>
    <ul>

        <li><i class="icon-circle-arrow-right"> </i>Ahmed Lbath, University Joseph Fourier of Grenoble, France</li>
        <li><i class="icon-circle-arrow-right"> </i>Amr Awadallah, Cloudera, USA</li>

    </ul>
</div>

Answer 1

完成部分扩展后，您可以尝试在窗口上手动触发滚动事件。

我曾遇到过一个类似的问题，并在DOM发生变化后强制使用scrollspy进行更新。更新scrollspy非常容易，因为它会挂钩窗口的滚动事件，您可以在完成操作DOM后手动触发。

whendone {
    $( document ).trigger( 'scroll' );
}

Bootstrap scrollspy与ng-show不兼容

1 个答案: