在Twitter Bootstrap Scrollspy中排除ID

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

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

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

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

Answer 1

我建议您使用所需的function扩展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'] }); 

Answer 2

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

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

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