Как отключить все ссылки внутри вложенной ul, за исключением тех, которые находятся на самом низком уровне?

Question

Скажем, у меня есть список, как это:

<ul> 
<li><a href="Sitepages/Introduction.aspx">Introduction</a> 
    <ul> 
     <li><a href="Sitepages/AboutMe.aspx">About me</a></li> 
     <li><a href="Sitepages/AboutTheCompany.aspx">About the company</a> 
      <ul> 
       <li><a href="Sitepages/History.aspx">History</a></li> 
       <li><a href="Sitepages/Locations.aspx">Locations</a> 
        <ul> 
         <li><a href="Sitepages/Belgium.aspx">Belgium</a></li> 
         <li><a href="Sitepages/France.aspx">France</a></li> 
         <li><a href="Sitepages/Germany.aspx">Germany</a></li> 
         <li><a href="Sitepages/Norway.aspx">Norway</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</li> 
</ul> 

У меня есть сценарий, который превращает эту вложенную в ул гармошку так, что только верхние уровни показаны на первом. Как только кто-то нажимает на ссылку внутри li, содержащую другую ul, она расширяет эту ul и так далее.

Дело в том, что все это прекрасно работает, когда ссылки не предоставляются, я хочу отключить поведение по умолчанию для каждого тега «a», за исключением тех, которые находятся на самом низком уровне. Таким образом, теги li на самом низком уровне, со ссылкой внутри них, все равно должны быть активными ссылками.

Вот Javascript код, который отключает поведение по умолчанию ссылки верхнего уровня:

$this.find("li").each(function(){ 
    if ($(this).find("ul").size() != 0) { 
     if ($(this).find("a:first")) { 
      $(this).find("a:first").click(function(){ return false; });   
    } 
}); 

Хотя связь верхнего уровня (Введение) будет игнорировать поведение по умолчанию (перенаправления) при нажатии, она будет расширяться и шоу опции «О себе» и «О компании». Но когда я нажимаю «О компании», она все еще перенаправляется.

Что я должен изменить в своем коде, чтобы установить поведение по умолчанию для каждого тега «a» равным false, за исключением последних (в моем примере: названия стран)?

Благодарим за помощь!

Answer 1

Вы можете настроить два обработчика. Один, чтобы отключить все ссылки внутри неупорядоченного списка, а другой для обработки кликов на последнем маркированного списка:

// Disable all links within an ul 
$('ul').on("click", "a", function(e){ 
    e.preventDefault(); 
}); 

// second handler to bind to the last ul 
$('ul:last').on("click", "a", function(e){ 
    window.location.href = $(e.target).attr('href'); 
}); 

Fiddle: http://jsfiddle.net/puleos/CjB99/