只有在點擊父母li的情況下切換ul子菜單的顯示

Question

我已經瀏覽了本網站上的其他一些我認爲可能會幫助的問題，例如this one和this one，但他們似乎無法回答我的問題。我有如下：

$(document).ready(function() { 
 
\t $(".has-submenu ul").hide(); 
 
    $(".has-submenu").click(function() { 
 
    \t $(this).children("ul").toggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul> 
 
    <li><a href="#">Item 1</a></li> 
 
    <li class="has-submenu"><a href="#">Item 2</a> 
 
    <ul> 
 
     <li><a href="#">Sub Item 1</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

你可以從這個片段看到，子菜單不管我是否點擊「項目2」或「子項1」隱藏。我意識到這是因爲「子項目1」是<li class="has-submenu">的一部分，所以當它被點擊時它會通過並切換子菜單。 CSS正在做它應該做的事情，我只是不知道如何調整CSS來說「如果父級li被點擊，只隱藏子菜單。我嘗試修改JQuery click函數以查找$(".has-submenu a")來指定它應該只這樣做，如果被點擊的特定元素，但是這似乎並沒有幫助。

我敢肯定，這是一個簡單的辦法，我只是不知道如何做到這一點。謝謝！

Answer 1

您可以使用$(".has-submenu > a")用於點擊選擇a那就是.has-submenu直接子只，然後用next()目標ul

$(".has-submenu ul").hide(); 
 
$(".has-submenu > a").click(function() { 
 
    $(this).next("ul").toggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="#">Item 1</a></li> 
 
    <li class="has-submenu"><a href="#">Item 2</a> 
 
    <ul> 
 
     <li><a href="#">Sub Item 1</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 2

您必須將選擇更改爲$(".has-submenu>a")和點擊切換其.siblings("ul")。

$(document).ready(function() { 
 
    $(".has-submenu ul").hide(); 
 
    $(".has-submenu>a").click(function() { 
 
    $(this).siblings("ul").toggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="#">Item 1</a></li> 
 
    <li class="has-submenu"><a href="#">Item 2</a> 
 
    <ul> 
 
     <li><a href="#">Sub Item 1</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 3

這個工程即使.has-submenu有一個以上的項目。

$(".has-submenu ul").hide(); 
 
$(".has-submenu > a").click(function() { 
 
    $(this).parent().find('ul').each(function(){$(this).toggle();}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="#">Item 1</a></li> 
 
    <li class="has-submenu"><a href="#">Item 2</a> 
 
    <ul> 
 
     <li><a href="#">Sub Item 1</a></li> 
 
    </ul> 
 
    <ul> 
 
     <li><a href="#">Sub Item 2</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>