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

删除对 .parent() 的调用.另外，你的 .submenu应该嵌套在 <li> 中它属于它，为您留下以下 jQuery:

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

还有这个标记:

<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>