Question

我有一个侧边栏的代码（类似于WordPress）。

我有多个父类<li class="panel parent">。其中一个父项具有Notes Received和Notes Sent的子容器。目前，当我点击孩子正在工作的父母时，如果我选择其他父母，孩子也会关闭。

我在jQuery中使用addClass来选择父级和子级。

问题
当我重新加载页面时，addClass从父级中消失了。我相信你可以使用localStorage但我不知道如何使用它。

你能救我吗？对不起我的英文。

<div id="sidebar-wrapper">
    <div id="sidebar">
        <ul id="accordion" class="sidebar-menu grandparent">
            <li class="panel parent">
                <a data-toggle="collapse" data-parent="#accordion" data-target="#notes" href="#"> Vegetables </a>
                 <div id="notes" class="panel-collapse collapse">
                    <!-- children -->
                    <ul class="children">
                        <li><a href="#"> Potato </a></li>
                        <li><a href="#"> Tomato </a></li>
                        ...
                    </ul>
                </div>
            </li>
            <li class="panel parent">
                <a data-toggle="collapse" data-parent="#accordion" data-target="#dummychild" href="#">Fruits</a>
                <div id="dummychild" class="panel-collapse collapse"></div> <!-- dummy child -->
            </li>
            <li class="panel parent">
                <a data-toggle="collapse" data-parent="#accordion" data-target="#dummychild" href="#">Spices</a>
                <div id="dummychild" class="panel-collapse collapse"></div> <!-- dummy child -->
            </li>
            ...
        </ul>   
    </div
</div>

这是我的jQuery

$(document).ready(function () {
    $('.grandparent').find('li a').click(function () {
        $('.grandparent').find('li a').removeClass('sidebar-hght');
        $(this).addClass('sidebar-hght');
        $($(this).closest('li.parent').children()[0]).addClass('sidebar-hght');
    });
});

感谢。

Answer 1

OLD ANSWER

你应该执行此

window.localStorage.setItem('OPEN', 'YES');

或者

window.localStorage.setItem('OPEN', 'YES');

取决于您是要显示还是关闭侧边菜单。然后你的jQuery应该变得像这样

$(document).ready(function () {
    $('.grandparent').find('li a').click(function () {
        $('.grandparent').find('li a').removeClass('sidebar-hght');
        $(this).addClass('sidebar-hght');
        $($(this).closest('li.parent').children()[0]).addClass('sidebar-hght');
    });
    if( window.localStorage.getItem('OPEN') ==='YES' ) {
        /* put here your code to add the class "addClass" to the parents you want */
    }
});

编辑：基于JSFIDDLE的新答案

这个javascript代码会做神奇的

$(document).ready(function () {
    $('.grandparent').find('li a').click(function () {
        $('.grandparent').find('li a').removeClass('sidebar-hght');
        $(this).addClass('sidebar-hght');
        window.localStorage.setItem('OPEN', $(this).html());
        alert("set OPEN to "+$(this).html());
        $($(this).closest('li.parent').children()[0]).addClass('sidebar-hght');
    });
    if( window.localStorage.getItem('OPEN') ) {
       $('.grandparent').find('li a').each(function( index ) {
          if($(this).html() === window.localStorage.getItem('OPEN'))
              $(this).click();
       });
    }
});

类似WordPress的补充工具栏

1 个答案: