3

我有一个基于 twitter bootstrap 的导航菜单栏，它使用 scrollspy 来进行高亮显示。

这通过匹配链接中# 之后的值来工作（例如<a href="#foo">，当<div id="foo">滚动到视图中时）。非常基本，这里是文档：http: //twitter.github.com/bootstrap/javascript.html#scrollspy

当我在被监视的元素中引入指向引导模式对话框的链接时，我的问题就出现了。想象我有：

<ul class="nav">
  <li><a href="#info">a link</a></li>
  <li><a href="#demo" role="button" data-toggle="modal">modal</a></li>
  <li><a href="#products">a different link</a></li>
</ul>
<p> .. my page .. </p>
<div id="info"><a name="info"></a>info on my product</div>
<div id="products"><a name="products"></a>a list of my products</div>
<div class="modal hide fade" id="demo" tabindex="-1" role="dialog">
  <div class="modal-header">my header</div>
  <div class="modal-body">some content</div>
  <div class="modal-footer"><button>close</button></div>
</div>
<p> .. more page </p>

代表我的模态叠加层的 div 也使用 #id-of-target 格式作为其 href，但由于它包含在导航中（当然），因此当（隐藏的）div 处于视图中时，scrollspy 也会突出显示。根据页面上模式代码的位置，这会混淆菜单系统的突出显示。

我可以看到应该将scrollspy修改为仅链接到可见的项目（因此当“演示”滚动到视图中时不会激活）但无法弄清楚如何修改插件以仅在元素可见时触发，或者以其他方式覆盖事件。

谁能给我一些指示？

4

1 回答 1

4

有趣的是，有时输入一个问题会让你以正确的方式思考来解决它，而仅仅考虑它却不会。

为了完成这项工作，我修改了 bootstrap 的 scrollspy 组件，以便它测试目标是否隐藏并退出激活例程（也不会引发激活事件，因为它不是活动的）

在这里：对我来说大约是第 1432 行（+if ..

, activate: function (target) {
    var active
      , selector

     if (target.is(":hidden")) return 

    this.activeTarget = target
于 2012-10-05T08:34:58.083 回答