Question

我有一个通过ajax加载的子菜单。我正在尝试使用Bootstraps scrollspy根据用户在当前页面上的位置突出显示子菜单。但它不适用于我的子菜单。我相信它，因为它通过ajax加载。如何让子菜单突出显示？

subnav.html

<div class="span3 affix">
    <div class="well sidebar-nav">
        <ul class="nav nav-list">
            <li class="nav-header">Document</li>
        <li><a href="#a">A</a></li>
        <li><a href="#b">B</a></li>
        </ul>
     </div><!--/.well -->
</div><!--/span-->

Mainpage.html

<body>
    <div id="sub-nav"></div>

    <div id="a" style="margin-bottom:200px;"></div>

    <div id="b" style="margin-bottom:200px;"></div>

</body>

<script>
jQuery(function(){
    $('#sub-nav').load('apps_subnav.html');
    $('body').scrollspy();
});
</script>

Answer 1

在尝试绑定scrollspy之前，您应该等待jQuery的AJAX请求完成[并最终为要追加的数据]。利用$().load()回调。

jQuery(function(){
  $('#sub-nav').load('subnav.html', function(){
    $('body').scrollspy();
  });
});

Answer 2

您的$('#body').scrollspy()似乎放错了位置，因为当您拨打$('#body')时文档尚未就绪。

更新：由于您的脚本块位于<body>下方，请忽略上述语句。

此外，如果您要定位<body>元素，请使用$('body')而不使用#（#目标元素与ids）。

试试这个：

jQuery(function(){
    $('#sub-nav').load('subnav.html');
    $('body').scrollspy();       
    // Or did you intend to target an element with id 'body'?
});

Bootstrap Scrollspy无法使用加载AJAX的菜单

2 个答案: