JavaScriptを使用してメインメニューを無効にするにはどうすればよいですか？

Question

'ul、li'にメニューがありますJavaScriptを使用して親メニューを無効にするにはどうしたらいいですか？親メニューのリダイレクトを停止したいだけです。子メニューのみがリダイレクトされます

親メニューを無効にするには、htmlにクラスまたはIDを追加できません。 JavaScriptを使ってリダイレクトを止めるのに役立つ方法はありますか？続き

が私のHTMLコードです：私は理解し何に基づいて

<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

、あなたもsecondLevelの下にあるリンクを除くすべてのfirstLevelのリンクを無効にしたいです。私がHTMLに触れていないと要求されたので、javascriptはすべての作業を単独で行います。

$(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; 
     }); 
    } 
    }); 
}); 

WORKING SNIPPET例：（HTMLは、あなたが投稿したものと同じであることに注意してください変更は、そこだけ上記​​javscriptをしなかった。

は、STEP-BY-STEPの説明についてはコメントを参照してください追加されました！）

$(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>