jquery - 如何在所选元素上添加类并从其他元素中删除？

Question

这是我的 HTML：

<ul class="menu menu-primary">
    <li class="current has-children">
        <a href="">Home</a>
        <span class="menu-item-toggle">
            <span></span>
        </span>
        <ul class="sub-menu">
            <li class="current-children"><a href="" class="">Homepage-1</a></li>
            <li class=""><a href="" class="">Home-2</a></li>
            <li class=""><a href="" class="">Home-3</a></li>
        </ul>
    </li>
</ul>

现在我想要的是点击“menu-item-toggle”，“menu-expand”被添加到相应的“li.has-children”并从其他li中删除。

这是我的脚本：

$('ul.menu li.has-children').each(function () {
    var menuItem = $(this)
    var menuToggle = $('<span class="menu-item-toggle"><span></span></span>')

    menuToggle.insertAfter(menuItem.find('> a')).on('click', function () {
        menuItem.toggleClass('menu-expand');
        menuItem.nextAll().removeClass('menu-expand');
        menuItem.prevAll().removeClass('menu-expand');
    })
})

标签： jquerymenuanchor

Answer 1

尝试这个

$('ul.menu li.has-children').click(function () {
    $('ul.menu li.has-children').each(function () {
        $(this).removeClass('menu-expand');
    });
    $(this).addClass('menu-expand');
});