0

以下のコードを使用して、ナビゲーションとその子を表示/非表示にしています。意図したとおりに動作しています。ナビゲーションが表示され、子リンクの 1 つをクリックすると、ナビゲーションが閉じて、新しいページに移動します。

 // swap classes for lower level nav
  jQuery('.toggle').click(function() {
  $(this).toggleClass('toggle');
  $(this).toggleClass('toggle_open');
 });

 jQuery('a.portfolio').click(function(e) {
  e.preventDefault();
 });

Safari ではこれは行われませんが、Chrome と Firefox では上記の動作が表示されます。インスペクタが開いているときに何が起こっているかを見ているとき。親リンクをクリックすると、トグル クラスが適用されます。子リンクをクリックすると、トグル クラスが元に戻ります。

要求されたページに移動する前にナビゲーションが閉じないようにするにはどうすればよいですか?

私のマークアップ（ナビゲーションには型破りです-私は知っています）：

<span class="toggle">
 <a href="portfolio/" class="level1 portfolio">Portfolio</a>
   <span>
     <a href="portfolio/item1/" class="first level2">item 1</a>
     <a href="portfolio/item2/" class="level2">item 2</a>
     <a href="portfolio/item3/" class="last level2">item 3</a>
   </span>   
</span>
4

2 に答える 2

1

e.stopPropagation()allのクリック ハンドラーに追加し、新しいページに移動できないように<a>削除する必要があります。e. preventDefault()

このコードを試してください：

jQuery('.toggle').click(function() {
  $(this).toggleClass('toggle');
  $(this).toggleClass('toggle_open');
 });

 jQuery('.toggle a.level2').click(function(e) {
    e.stopPropagation();
 });
于 2013-02-01T17:05:15.727 に答える
0

e.stopPropagation()追加のイベント ハンドラーを呼び出さないようにしてください。イベント ハンドラーの順序を変更する必要がある場合があります。

于 2013-02-01T16:50:46.460 に答える