javascript - スライドしないですべて切り替え

Question

次のような垂直スライド メニューがあります。

    <ul class="menu">
        <li>link</li>
        <li>link</li>
        <li class="more">link with submenu</li>
            <ul class="submenu">
                <li>sub link 1</li>
                <li>sub link 2</li>  
            </ul>
        <li class="more">link with submenu</li>
            <ul class="submenu">
                <li>sub link 1</li>
                <li>sub link 2</li>  
            </ul>
        <li>link</li>  
        <li>link</li>

    </ul>  

jQuery は次のようになります。

jQuery(document).ready(function($) {

$(".more").click(function() {

$(this).parent().children(".submenu").slideToggle(500); });
});

私の問題は、「.more」をクリックすると、すべての「.submenu」がslideToggleになっていることです（両方が開きます）

どうすればよいので、スライドトグルされているのは正しいサブメニューだけですか?

ありがとうございました。

Answer 1

Remove the call to .parent(). Also, your .submenu should be nested within the <li> to which it belongs, leaving you with the following jQuery:

$("li.more").on("click", function() {
    $("ul.submenu", this).slideToggle(500);
});

And this markup:

<ul class="menu">
    <li>link</li>
    <li>link</li>
    <li class="more">
        link with submenu
        <ul class="submenu">
            <li>sub link 1</li>
            <li>sub link 2</li>  
        </ul>
    </li>
    <li class="more">
        link with submenu
        <ul class="submenu">
            <li>sub link 1</li>
            <li>sub link 2</li>  
        </ul>
    </li>
    <li>link</li>  
    <li>link</li>
</ul>

Answer 2

これです？

$(this).next().eq(0).slideToggle(500); });