Question

我有一个Twitter Bootstrap网站，主菜单上有很多链接。我有Scrollspy设置来定位该菜单并且效果很好。

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

要注意，最后一个菜单项被调用，“Login”有一个ID并单击它会打开一个Twitter模式。但是，由于模态在代码中即使没有加载也会影响到scrollspy。

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

Answer 1

我不知道任何＆＃34; easy＆＃34;解决你的情况。但是你可以使用＆＃34;激活＆＃34;检查身份证件并对其采取行动的事件：

$('#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，并将导航栏的背景颜色更改为与活动项对应的颜色:-)

Answer 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']
});

在Twitter Bootstrap Scrollspy中排除ID

2 个答案: