在 Twitter Bootstrap Scrollspy 中排除 ID答案

【问题标题】：Exclude ID in Twitter Bootstrap Scrollspy在 Twitter Bootstrap Scrollspy 中排除 ID
【发布时间】：2012-11-25 19:49:11
【问题描述】：

我有一个 Twitter Bootstrap 网站，其主菜单中充满了链接。我有针对该菜单的 Scrollspy 设置，效果很好。

但是，我需要 scrollspy 来排除菜单中的最后一个链接。是否有任何简单的选项或属性可以做到这一点？每个链接都有一个 ID。

要注意，最后一个菜单项被调用，“登录”有一个 ID，单击它会打开一个 Twitter 模式。然而，由于模态在代码中，即使没有加载它也会影响滚动间谍。

所以只需要一种方法来告诉排除一个 ID 所以假设是这样的：

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

我不知道您的情况有任何“简单”的解决方法。但是，您可以使用“激活”事件来检查 ID 并对其进行操作：

$('#myscrollspyID li').on('activate',  function(){
     var id = $(this).find("a").attr("href");
     if (id === "#yourlastID"){
          //do something, i.e. remove all active classes from your scrollspy object, so  none are shown as active
     }
}

P.S：这是我非常粗略的代码，但我修改了一些我自己使用的代码。我使用活动事件检查活动项的ID，并将导航栏的背景颜色更改为活动项对应的颜色:-)

【讨论】：

【解决方案2】：

我建议您使用所需的功能扩展 ScrollSpy，例如 https://stackoverflow.com/a/13460392/1407478

带有可排除 ID 的 ScrollSpy 扩展：

// save the original function object
var _superScrollSpy = $.fn.scrollspy;

// add a array of id's that need to be excluded
$.extend( _superScrollSpy.defaults, {
    excluded_ids : []
});

// create a new constructor
var ScrollSpy = function(element, options) {
    _superScrollSpy.Constructor.apply( this, arguments )
}

// extend prototypes and add a super function
ScrollSpy.prototype = $.extend({}, _superScrollSpy.Constructor.prototype, {
    constructor: ScrollSpy
    , _super: function() {
        var args = $.makeArray(arguments)
        // call bootstrap core
        _superScrollSpy.Constructor.prototype[args.shift()].apply(this, args)
    }
    , activate: function (target) {
        //if target is on our exclusion list, prevent the scrollspy to activate
        if ($.inArray(target, this.options.excluded_ids)>-1) {
            return
        }
        this._super('activate', target)
    }
});

// override the old initialization with the new constructor
$.fn.scrollspy = $.extend(function(option) {
    var args = $.makeArray(arguments),
    option = args.shift()

    //this runs everytime element.scrollspy() is called
    return this.each(function() {
        var $this = $(this)
        var data = $this.data('scrollspy'),
            options = $.extend({}, _superScrollSpy.defaults, $this.data(), typeof option == 'object' && option)

        if (!data) {
            $this.data('scrollspy', (data = new ScrollSpy(this, options)))
        }
        if (typeof option == 'string') {
            data[option].apply( data, args )
        }
    });
}, $.fn.scrollspy);

对于http://twitter.github.com/bootstrap/javascript.html#scrollspy 的示例，如果您希望 ScrollSpy 阻止显示 #mdo，则应该像这样初始化它

$(".scrollspy-example").scrollspy({
    excluded_ids : ['#mdo']
});

你可以尝试将代码放在一个单独的文件中，scrollspy-addon.js，包含它并初始化你的scrollspy

$("#your-scrollspy-id").scrollspy({
    excluded_ids : ['#login']
});

【讨论】：