3

scrollspy を使用して強調表示する twitter ブートストラップに基づくナビゲーション メニュー バーがあります。

これは、リンクの # の後の値を照合することで機能します (たとえば<a href="#foo">、<div id="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 形式を使用しますが、(もちろん) nav 内に含まれているため、(非表示の) div が表示されているときに scrollspy ALSO も強調表示されます。ページ上のモーダル コードの場所によっては、メニュー システムの強調表示が混乱します。

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 に答える