Wie deaktiviert man das Hauptmenü mit JavaScript?

Question

Ich habe Menüs in 'ul, li' Wie kann ich das übergeordnete Menü mit JavaScript deaktivieren? Ich möchte die Umleitung für das übergeordnete Menü stoppen und nur das untergeordnete Menü wird umgeleitet.

Ich kann keine Klasse oder ID in HTML hinzufügen, um das übergeordnete Menü zu deaktivieren. Gibt es eine Möglichkeit, die Umleitung mit JavaScript zu stoppen?

Folgende ist mein HTML-Code:

<ul class="firstLevel" style=""> 
    <li class="sel"> 
    <div class="item"> 
     <a title="Home" href="#/"><span>Home</span></a> 
    </div> 
    </li> 
    <li class="dir"> 
    <div class="item"> 
     <a title="About Us" href="#/page-18080"><span>About Us</span></a> 
     <ul class="secondLevel"> 
     <li class=" "> 
      <div class="item"> 
      <a title="Vision" href="#/page-18126"><span>Vision</span></a> 
      </div> 
     </li> 

     <li class=" "> 
      <div class="item"> 
      <a title="Our Team" href="#/Our-Team"><span>Our Team</span></a> 
      </div> 
     </li> 

     <li class=" "> 
      <div class="item"> 
      <a title="Our Board" href="#/page-18128"><span>Our Board</span></a> 
      </div> 
     </li> 

     <li class=" "> 
      <div class="item"> 
      <a title="Our Charter" href="#/page-18127"><span>Our Charter</span></a> 
      </div> 
     </li> 

     </ul> 
    </div> 
    </li> 
    <li class="dir"> 
    <div class="item"> 
     <a title="Events" href="#/events"><span>Events</span></a> 
     <ul class="secondLevel"> 
     <li class=" "> 
      <div class="item"> 
      <a title="About the event" href="#/page-18147"><span>About the event</span></a> 
      </div> 
     </li> 
     </ul> 
    </div> 
    </li> 
</ul> 

Answer 1

https://api.jquery.com/event.stoppropagation/

$(child).on("click", function(event) { 
    // TODO 

    event.stopPropagation(); 
}); 

Answer 2

Nach dem, was ich verstanden, Sie alle firstLevel Links außer Links unter secondLevel auch deaktivieren möchten. Wie gewünscht habe ich den HTML nicht berührt und das Javascript wird die ganze Arbeit alleine machen.

SEE KOMMENTAR Eine Schritt-für-Schritt-Anleitung:

$(function() { 
    $(".firstLevel").find('a').each(function() { 
    // this is all link elements under element with class firstlevel 
    if ($(this).parents('.secondLevel').length) { 
     // this is all link elements which also is under element with class secondLevel 
     $(this).click(function() { 
     //don't disturb the event here. feel free to remove the below alert as well. 
     alert("this link will work"); 
     }); 
    } else { 
     // this is all link elements under a firstLevel element but not a secondLevel element 
     $(this).click(function() { 
     // we shud block this click. we will return false so that jQuery will internally call e.stopPropogation() and e.preventDefault() and thus stop the link from working. 
     alert("this link will not work"); 
     return false; 
     }); 
    } 
    }); 
}); 

ARBEITS SNIPPET Beispiel: (beachten Sie, dass die HTML gleiche ist, wie Sie auf dem Laufenden keine Änderungen dort vorgenommen wurden, nur die oben javscript. wurde hinzugefügt!)

$(function() { 
 
    $(".firstLevel").find('a').each(function() { 
 
    if ($(this).parents('.secondLevel').length) { 
 
     $(this).click(function() { 
 
     alert("this link will work"); 
 
     }); 
 
    } else { 
 
     $(this).click(function() { 
 
     alert("this link will not work"); 
 
     return false; //this will call e.stopPropogation() and e.preventDefault() and thus stop the link from working. 
 
     }); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="firstLevel" style=""> 
 
    <li class="sel"> 
 
    <div class="item"> 
 
     <a title="Home" href="#/"><span>Home</span></a> 
 
    </div> 
 
    </li> 
 
    <li class="dir"> 
 
    <div class="item"> 
 
     <a title="About Us" href="#/page-18080"><span>About Us</span></a> 
 
     <ul class="secondLevel"> 
 
     <li class=" "> 
 
      <div class="item"> 
 
      <a title="Vision" href="#/page-18126"><span>Vision</span></a> 
 
      </div> 
 
     </li> 
 

 
     <li class=" "> 
 
      <div class="item"> 
 
      <a title="Our Team" href="#/Our-Team"><span>Our Team</span></a> 
 
      </div> 
 
     </li> 
 

 
     <li class=" "> 
 
      <div class="item"> 
 
      <a title="Our Board" href="#/page-18128"><span>Our Board</span></a> 
 
      </div> 
 
     </li> 
 

 
     <li class=" "> 
 
      <div class="item"> 
 
      <a title="Our Charter" href="#/page-18127"><span>Our Charter</span></a> 
 
      </div> 
 
     </li> 
 

 
     </ul> 
 
    </div> 
 
    </li> 
 
    <li class="dir"> 
 
    <div class="item"> 
 
     <a title="Events" href="#/events"><span>Events</span></a> 
 
     <ul class="secondLevel"> 
 
     <li class=" "> 
 
      <div class="item"> 
 
      <a title="About the event" href="#/page-18147"><span>About the event</span></a> 
 
      </div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </li> 
 
</ul>