JavaScript를 사용하여 기본 메뉴를 비활성화하는 방법은 무엇입니까?

Question

'ul, li'에 메뉴가 있습니다. 어떻게 JavaScript를 사용하여 상위 메뉴를 비활성화 할 수 있습니까? 상위 메뉴에 대한 리디렉션을 중지하고 자식 메뉴 만 리디렉션됩니다.

상위 메뉴를 사용하지 않으려면 html에 클래스 또는 ID를 추가 할 수 없습니다. JavaScript를 사용하여 리디렉션을 중지하는 데 도움이 될 수있는 방법이 있습니까? 내가 이해 무엇을 기반으로

<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 코드입니다. 요청한대로 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 조각을 예 :.합니다 (HTML은 더 변화가있을 경우에만 위의에 javscript을하지되었다 게시 된 동일 있습니다 추가되었습니다!)

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