親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")をクリックすると.has-submenuの子のみであるaを選択し、次に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は1項目以上を持っている場合でも動作します。

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