防止子要素

Question

をクリックする上で親のクリックイベントを発射I持っている三つのレベルにドリルダウンし、次のメニュー： Main > sub > subsub

<nav> 
     <div class="mainMenu">Main Menu Item # 1. 
        <ul> 
         <li> Sub Menu Item # 1</li> 
         <li class="subMenu"> Sub Menu Item # 2 
          <ul> 
           <a href="New"> 
            <li>New</li> 
           </a> 
           <a href=""> 
            <li>Old</li> 
           </a> 
           <a href=""> 
            <li>View </li> 
           </a> 
          </ul> 
          <div class="n_r2_c2"></div> 
         </li> 
         <li> Sub Menu Item # 3</li> 
         <li> Sub Menu Item # 4</li> 
        </ul> 
    </div> 

そして、このように私JQ：

$('.mainMenu').click(function() { 
    $(this).children('ul').slideToggle(250); 
}); 

$('.subMenu').click(function() { 
     $(this).children('ul').slideToggle(250); 
}); 

メインメニューのサブメニューの切り替えは問題ありませんが、サブメニューの項目をクリックするとサブメニューを切り替えるのではなく、 elfサブメニューをクリックしているときにメインメニューclickイベントが発生している可能性が最も高いのはサブメニューが内部にあり、メインのdivをクリックするとそのイベントがクリックされるからでしょうか？

とにかくこの問題を解決するにはどうすればよいですか。

Answer 1

event.stopPropagation()を使用すると、イベントがDOMツリーをバブリングするのを防ぐことができます。

例：

$('.subMenu').click(function (e) { 
    $(this).children('ul').slideToggle(250); 
    e.stopPropagation(); 
}); 

これはあなたの問題を解決します。