擴大父李點擊孩子UL

我有以下結構：擴大父李點擊孩子UL

<div class="Downloadscontainer"> 
<ul> 
    <li>level 1</li> 
    <li><a href="#">level 1</a> 
     <ul> 
      <li>level 2</li> 
      <li>level 2</li> 
      <li><a href="#">some page</a> 
      <ul> 
       <li>level 2</li> 
       <li>level 2</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul>

，我試圖以其父李點擊顯示UL，以下是我的jQuery

$(document).ready(function() { 
    $(".Downloadscontainer ul li ul").css("display", "none"); 
    $(".Downloadscontainer li").each(function() { 
     $(this).click(function() { 
      if ($(this).children('ul').length > 0) { 
       $('.Downloadscontainer li ul').toggle(); 
      } 
     }); 
    }); 
});

所以，如果我點擊1級LI它顯示UL，然後如果我點擊2級LI其中有UL以及它關閉1級LI的UL;我希望它繼續打開子女UL。我怎樣才能獲得這個功能？

link to fiddle

來源

2014-10-17 Umar Khan

http://jsfiddle.net/TrueBlueAussie/ot0kxs0z/2/

$(".Downloadscontainer li").click(function (e) { 
    e.stopPropagation(); 
    $(this).children('ul').toggle(); 
});

筆記：

你不需要each到處理程序附加到jQuery的多個元素。
您只需要停止將子點擊傳播到DOM中的父LI即可
由於@George建議您最好附加到錨定點擊。

以錨的方法，我建議以下爲DOM變化友好：

http://jsfiddle.net/TrueBlueAussie/ot0kxs0z/5/

$(".Downloadscontainer a").click(function (e) { 
    e.preventDefault(); 
    $(this).closest('li').children('ul').toggle(); 
});

注：

它找到最接近LI到錨點擊，然後鑽到子女UL s（而不是通過next導航，這需要一個已知的安排。
preventDefault將停止空白書籤鏈接（在您的示例中爲href="#"）從滾動到頁面頂部。如果他們是完整的鏈接，他們會阻止他們瀏覽，所以如果您添加頁面鏈接，您可能需要額外的檢查。

例如，你可以檢查，如果該鏈接是空白的書籤，並允許各個環節正常閃光：

http://jsfiddle.net/TrueBlueAussie/ot0kxs0z/7/

$(".Downloadscontainer a").click(function (e) { 
    if ($(this).attr("href") == '#') { 
     e.preventDefault(); 
     $(this).closest('li').children('ul').toggle(); 
    } 
});

這撥弄具有外部鏈接到谷歌，還有#鏈接。

來源

2014-10-17 10:42:14

感謝你給予的幫助:)現在我對它有了更好的理解。 – 2014-10-17 11:03:06

如何事件處理程序連接至錨？：

$(".Downloadscontainer li a").click(function (e) { 
    e.preventDefault(); 
    $(this).next('ul').toggle(); 
});

JSFiddle

記住，防止您的錨的默認操作，以免被重定向，如果它有鏈接。
.each()循環對許多jQuery方法來說並不是必需的，事件處理綁定器方法如.click(),.change(),.keydown()等包括在內。

來源

2014-10-17 10:41:26 George

錨點是書籤鏈接，所以不會重定向，但是您的解決方案將避免瀏覽器跳轉到頁面頂部，因此應添加到任何答案中。 +1 – 2014-10-17 10:49:25

當然，我不知道這段代碼可能會在哪裏。無論你做什麼都好。（： – George 2014-10-17 10:52:21

感謝@George爲你提供幫助:)我想接受這兩個答案，但不幸的是只能接受一個:( – 2014-10-17 11:06:50

我想這和它的更迭，你可以用它

$(".main-menu li").click(function (e) { 
    e.stopPropagation(); 
    $(this).children('ul').slideToggle().css("padding-left", "30px"); 
});

我添加填充左每個孩子UL一些額外的feture，這樣我們就可以明白/ desfine哪一個擴展。

來源

2017-09-16 16:24:37 Rashed

擴大父李點擊孩子UL

回答

相關問題