带有多个导航栏的 Bootstrap Scrollspy答案

【问题标题】：Bootstrap Scrollspy with Multiple Navbars带有多个导航栏的 Bootstrap Scrollspy
【发布时间】：2013-09-19 22:22:26
【问题描述】：

Here is a fiddle.

由于in this question about creating a responsive nav menu 描述的问题，我需要两个相同的导航元素，一个对小屏幕可见，另一个对大屏幕可见。

但是，我希望 scrollspy 能够同时跟踪和应用 .active 类。为简单起见，假设我们有两个相同的导航，如下所示：

<div class="scrollspy navbar">
    <nav class="nav">
        <li><a href="#option1">Option 1</a></li>
        <li><a href="#option2">Option 2</a></li>
        <li><a href="#option3">Option 3</a></li>
        <li><a href="#option4">Option 4</a></li>
        <li><a href="#option5">Option 5</a></li>
    </nav>
</div>

然后是内容：

<div class="content">
    <section id="option1">1</section>
    <section id="option2">2</section>
    <section id="option3">3</section>
    <section id="option4">4</section>
    <section id="option5">5</section>
</div>

然后调用scrollspy：

$(".wrapper").scrollspy({ target: ".scrollspy" });

您会在fiddle 中看到活动类被搞砸了，并且在两个导航上来回闪烁。但是，如果您从其中一个导航中删除 scrollspy 类，则另一个可以正常工作。这可以修复吗？

【问题讨论】：

标签： jquery twitter-bootstrap navbar scrollspy

【解决方案1】：

这是我的朋友的解决方法。这有点拗口，所以如果有人有更直接的解决方法，请继续。与此同时，这将得到修复。

$(document).ready(function () {
    $(".wrapper").scrollspy({ target: ".scrollspy" });

    var scollSpy2ActiveLI = "";

    $('.wrapper').on('activate.bs.scrollspy', function () {
        if (scollSpy2ActiveLI != "") {
            scollSpy2ActiveLI.removeClass('active');            
        }        
        var activeTab = $('.scrollspy li.active a').attr('href');
        scollSpy2ActiveLI = $('.scrollspy2 li a[href="' + activeTab + '"]').parent();
        scollSpy2ActiveLI.addClass('active');
    })

    $('.wrapper').trigger('activate.bs.scrollspy');
});

请注意，我正在使用 .scrollspy2 作为您的第二个导航。

这里是小提琴：http://jsfiddle.net/jofrysutanto/MUpz5/1/

【讨论】：

【解决方案2】：

这个解决方案对我不起作用，因为我有 2 个不完全相同的导航，并且内部没有相同的锚链接。（.scrollspy1 中的活动链接不一定在 .scrollspy2 中具有相应的双胞胎）

但是，一个简单的：

$(".wrapper").scrollspy({ target: ".scrollspy, .scrollspy2" });

足以解决闪烁问题。

【讨论】：

【解决方案3】：

如果您提供一个空目标，所有导航都可以工作：https://stackoverflow.com/a/23937735

刚刚自己测试过。一个令人惊讶的解决方案。

【讨论】：

【解决方案4】：

使用 id 而不是类。

$(".wrapper").scrollspy({ target: "#scrollspy" });

【讨论】：