Question

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

这可以通过匹配链接中＃后的值（例如<a href="#foo">滚动到视图中时的<div id="foo">）来实现。非常基本，这是doco：http://twitter.github.com/bootstrap/javascript.html#scrollspy

当我在一个被监视的元素中引入一个bootstrap模式对话框的链接时，我的问题就来了。想象我有：

<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以仅链接到可见的项目（因此当“demo”滚动到视图中时不会激活）但是无法解决如何修改插件仅在元素可见时触发，或以其他方式覆盖事件。

任何人都可以给我一些指示吗？

Answer 1

搞笑如何输入一个问题有时候会让你以正确的方式思考解决问题，只是在思考它的时候没有。

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

这里是：我的第1432行（+ if ..

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

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

    this.activeTarget = target

使用带有twitter bootstrap scrollspy的模态覆盖 - 不正确的激活

1 个答案: