Как добавить класс на выбранный элемент и удалить форму других? - PullRequest
Новая
       29

Как добавить класс на выбранный элемент и удалить форму других?

0 голосов
/ 08 ноября 2018

Это мой 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');
    })
})

Ответы [ 2 ]

0 голосов
/ 08 ноября 2018

Вы можете сделать это следующим образом. 

 $('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');
        })
    })
0 голосов
/ 08 ноября 2018

Попробуйте это 

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