Question

我正在努力使用这段代码，尝试只切换我点击的切换按钮的子元素，但到目前为止，当我点击一个切换按钮时，所有隐藏的元素都会显示，而不仅仅是这个元素的孩子..我做错了什么？

感谢您提出任何建议。

jQuery的：

$('.menu-item-has-children > a').click(function(event) {
    if(!$('.sub-menu > .menu-item').is(':visible'))
    {
        $(this).addClass('selected');
    }
    else {
        $(this).removeClass('selected');
    }

        $('.sub-menu').slideToggle('fast');
    return false;
});

HTML：

<div class="menu-primary" style="display: block;">
    <ul id="menu-menu-1" class="v-list">
        <li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-30"><a title="Browse">Browse</a>
        <ul class="sub-menu" style="display: block;">
            <li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="link">Browse by Type</a></li>
            <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="link">Browse by Author</a></li>
            <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="link">Browse by Country</a></li>
        </ul>
        </li>
        <li id="menu-item-34" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-34"><a class="selected">Learn</a>
        <ul class="sub-menu" style="display: block;">
            <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="link">General</a></li>
        </ul>
        </li>
        <li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="link">About</a></li>
    </ul>
</div>

Answer 1

修正：

$('.menu-item-has-children > a').click(function(event) {
    if(!$('.sub-menu > .menu-item').is(':visible'))
    {
        $(this).addClass('selected');
    }
    else {
        $(this).removeClass('selected');
    }

        $(this).next().slideToggle('fast');
    return false;
});

Answer 2

选中 Fiddle Demo

$('.menu-item-has-children > a').click(function(event) {
   $(this).next('.sub-menu').slideToggle('fast').toggleClass('selected');
});

使用 toggleClass() 。

jQuery只切换孩子

2 个答案: