रोकें चाइल्ड तत्व

Question

क्लिक करने पर अपनी माता-पिता की क्लिक करें घटना फायरिंग मैं एक निम्न मेनू कि तीन स्तरों के लिए नीचे अभ्यास: 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() का उपयोग घटना को डीओएम पेड़ को बुलबुला करने से रोकने के लिए करें।

उदाहरण:

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

यह आपकी समस्या का समाधान होगा।