Как использовать куки или локальное хранилище для добавления класса в родительское подменю - PullRequest
Новая
       14

Как использовать куки или локальное хранилище для добавления класса в родительское подменю

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

У меня есть 2 разные страницы с общим меню боковой панели.В моем примере вы можете увидеть родительские меню с подменю.В Dashboard у меня есть подменю page1, когда я нажимаю на него, перенаправляю на другие страницы, я хочу, чтобы в боковой панели родительского меню должен был быть добавлен класс.Даже я обновляю страницу.

Вот мой HTML-код

Проверить эту скрипку 

<ul class="nav nav-sidebar">
    <li class="sidebar-nav-item with-sub">
        <a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Dashboard</a>
        <ul class="nav sidebar-nav-sub">
            <li class="nav-sub-item"><a href="menu1.html" class="nav-sub-link">Page 01</a></li>
            <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 02</a></li>
            <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 03</a></li>
            <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 04</a></li>
            <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 05</a></li>
        </ul>
    </li>
    <li class="sidebar-nav-item with-sub">
        <a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Menu</a>
        <ul class="nav sidebar-nav-sub">
            <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 01</a></li>
            <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 02</a></li>
            <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 03</a></li>
            <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 04</a></li>
            <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 05</a></li>
        </ul>
    </li>
    <li class="sidebar-nav-item with-sub">
        <a href="" class="sidebar-nav-link"><i class="icon ion-ios-book-outline"></i> Pages</a>
        <ul class="nav sidebar-nav-sub">

            <li class="nav-sub-item sub-with-sub">
                <a href="#" class="nav-sub-link">Pricing</a>
                <ul>
                    <li class="sub-sub-link"><a href="">Pricing 01</a></li>
                    <li class="sub-sub-link"><a href="">Pricing 02</a></li>
                    <li class="sub-sub-link"><a href="">Pricing 03</a></li>
                </ul>
            </li>

        </ul>
    </li>
</ul>

1 Ответ

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

Поскольку вы используете jQuery, вы можете использовать jquery lib js-cookie, чтобы добавить выбранное меню к файлам cookie, затем прочитать его на других страницах и присоединить класс.

Но я предлагаю другой способв зависимости от URL-адреса целевой страницы, связанной привязки, они активируют родительский элемент меню боковой панели.

Добавьте следующую строку в начало вашей функции готовности: 

$(document).ready(function() {
    $('a[href="'+window.location.pathname+'"]').closest('.sidebar-nav-item').find('.sidebar-nav-link').addClass('active');

    ...
});
...