javascript-将模式覆盖与twitter bootstrap scrollspy一起使用-错误激活

我有一个基于twitter引导的导航菜单栏,该菜单栏使用scrollspy进行突出显示.

这可以通过匹配链接中#后的值来实现(例如,当< div id =“ foo”>滚动到视图中时,是< a href =“#foo”>).很基本的,这是doco：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的href也使用#id-of-target格式,但是由于它包含在导航栏中(当然),所以滚动的ALSO会在显示(隐藏的)div时突出显示.根据模式代码在页面上的位置,这会混淆菜单系统的突出显示.

我可以看到应该将scrollspy修改为仅链接到可见的项(因此,当“演示”滚动到视图中时不会激活),但无法解决如何将插件修改为仅在元素可见时触发的情况,或者以其他方式覆盖事件.

谁能给我一些指示？

解决方法:

有趣的是,有时输入一个问题会如何使您以正确的方式思考,以解决问题,而仅考虑一个问题就不会.

为了完成这项工作,我修改了bootstrap的scrollspy组件,以便它测试目标是否被隐藏并退出激活例程(也不会引发被激活的事件,因为它不处于活动状态)

在这里是：1432行对我来说(如果..

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

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

    this.activeTarget = target

标签：twitter-bootstrap,modal-dialog,javascript
来源： https://codeday.me/bug/20191031/1978582.html