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

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>

现在我想要的是，点击“菜单项-切换”，“菜单-展开”被添加到各自的“li.has- click”中，并从其他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');
    })
})

Answer 1

尝尝这个

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

Answer 2

您可以通过以下方式完成此操作。

 $('ul.menu li.has-children').each(function () {
        var menuItem = $(this)
        var menuToggle = $('<span class="menu-item-toggle"><span></span></span>')
        $(this).removeClass('menu-expand');
        menuToggle.insertAfter(menuItem.find('> a')).on('click', function () {
            menuItem.toggleClass('menu-expand');
            menuItem.nextAll().removeClass('menu-expand');
            menuItem.prevAll().removeClass('menu-expand');
            $(this).addClass('menu-expand');
        })
    })