Сохранить выбранное меню активным - PullRequest
Новая
       32

Сохранить выбранное меню активным

0 голосов
/ 01 апреля 2020

Я использую ul и li для создания бокового меню. Я пытался выделить выбранное меню, но не могу понять, что я делаю неправильно. Я попытался использовать класс для верхней части "ul" и обработать его щелчок, а также добавить класс к каждому "li" и обработать его щелчок.

В некоторых пунктах меню есть подменю.

Вот что у меня есть и что я устал: 

<ul class="list-unstyled components mb-5">
    <li class="active component">
        <a href="\Home\">Dashboard</a>
    </li>
    <li class="component">
        <a href="#Sub1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Item 1</a>
        <ul class="collapse list-unstyled" id="Sub1">
            <li>
                <a href="#">Sub-Menu 1-1</a>
            </li>
            <li>
                <a href="#">Sub-Menu 1-2</a>
            </li>
        </ul>
    </li>
    <li class="component">
        <a href="#Sub2" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Item 2</a>
        <ul class="collapse list-unstyled" id="Sub2">
            <li>
                <a href="#">Sub-Menu 2-1</a>
            </li>
            <li>
                <a href="#">Sub-Menu 2-2</a>
            </li>
        </ul>
    </li>
    <li class="component">
        <a href="/blah.aspx">Item 3</a>
    </li>
    <li class="component">
        <a href="/blah.aspx">Item 4</a>
    </li>
</ul>

JS / Jquery: 

$(".component").on("click", "a", function(){  // Also tried with "ul" class of "components" instead of "component"
    //event.preventDefault();  // When I uncomment this, clicking the menu doesn't do anything
    $(this).parent().removeClass("active");
    $(this).addClass("active");
    //$(this).parent().addClass("active").siblings().removeClass("active");
});

1 Ответ

0 голосов
/ 01 апреля 2020

Ваш переключатель класса удаляется, а затем сразу же добавляет класс обратно. Посмотрите на это для нужного вам эффекта переключения: https://api.jquery.com/toggleclass/

...