Question

我创建了一个多级侧边栏。当用户单击子选项时，我想打开侧边栏。

为此，我需要将CSS类添加到当前元素，并从边栏中的最后一个选定元素中删除CSS类。

但是问题是，当用户单击选项时，页面会导航并重新加载，从而导致侧边栏处于初始状态。

我已经使用会话存储将数据带到下一页，这是工作成功。但是我的侧边栏仍然崩溃到初始状态，尚未将“打开” css类添加到其中。

var sideCollection = document.getElementById('nav__list');
    if (sideCollection) {
        sideCollection.addEventListener('click', event => {
            var active = document.getElementsByClassName('open');
            for (i = 0; i < active.length; i++) {
                console.log(active[i].classList.remove('open'));
            }
            event.target.classList.add('open');
        })
    }

    var current = document.getElementById('nav__list');
    if (current) {
        var idCollection = [];
        current.addEventListener('click', event => {
            if (!(event.target.id.indexOf('group') > -1)) {
               // console.log("sau-",event.target.id);
                idCollection.push(event.target.id);
            }
            sessionStorage.setItem('activeId', JSON.stringify(idCollection));
        })
    }

    window.onload = load;
    function load() {
        var retrievedData = sessionStorage.getItem("activeId");
        var idArray = JSON.parse(retrievedData);
        if (typeof idArray !== 'undefined' ) {
            for (let i = 0; i < idArray.length; i++) {
                document.getElementById(idArray[i]).classList.add('open');
                //console.log(idArray[i]);
            }

        }
    }

.group-list a,
          .group-list label {
            border-left: 5px solid black;
            padding: 10px 10px;
            background: #7E7EF9;
        
          }
        
          .sub-group-list a,
          .sub-group-list label {
        
            background: #64D654;
            border-left: 5px solid black;
            padding: 10px 10px;
          }
        
          ul {
            list-style-type: none;
          }
        
          .group-list a:focus,
          .group-list a:hover,
          .group-list label:focus,
          .group-list label:hover {
            background: #131313;
          }
        
          .sub-sub-group-list a,
          .sub-sub-group-list label {
            background: #D69954;
          }
        
          .group-list,
          .sub-group-list,
          .sub-sub-group-list {
            height: 100%;
            max-height: 0;
            overflow: hidden;
            -webkit-transition: max-height 2s ease-in-out;
            transition: max-height 2s ease-in-out;
            margin-top: 25px;
          }
        
          .nav__list input[type=checkbox]:checked+label+ul {
            max-height: 1000px;
            font-size: 18px;
        
          }
        
          .root-menu {
            background: #DFDBF9;
            font-size: 18px;
            color: #343434;
            position: relative;
            font-weight: bold;
            padding: 10px 10px;
            margin-top: 10px;
            border-left: 5px solid black;
          }
        
          .nav_li {
            margin-bottom: 30px;
          }
        
          .li-vertical {
            margin-top: 30px;
          }
        
          .icon-padding {
            padding-left: 60px;
          }
          .open {
      display: block !important;
  }

<div class="side-bar-container">
            <nav class="nav" role="navigation">
                <ul class="nav__list" id="nav__list">
                    <li class="nav_li">
                        <input id="group-3" type="checkbox" hidden />
                        <label for="group-3" class="root-menu">
                            First level
                            <i class="fas fa-angle-down icon-padding"></i>
                        </label>
                        <ul class="group-list">
                            <li class='li-vertical nav_li'>
                                <li class="nav_li">
                                    <a href="/uvdemo/page1.html">1st level item</a>
                                </li>
                                <li class="nav_li">
                                    <a href="/uvdemo/page1.html">1st level item</a>
                                </li>
                                <input id="sub-group-3" type="checkbox" hidden />
                                <label for="sub-group-3">
                                    Second level
                                    <i class="fas fa-angle-down icon-padding"></i>
                                </label>
                                <ul class="sub-group-list">
                                    <li class='li-vertical nav_li'>
                                        <a href="/uvdemo/page1.html">2nd level nav item</a>
                                    </li>
                                    <li class="nav_li">
                                        <a href="/uvdemo/page1.html">2nd level nav item</a>
                                    </li>
                                    <li class="nav_li">
                                        <a href="/uvdemo/page1.html">2nd level nav item</a>
                                    </li>
                                    <li class="nav_li">
                                        <input id="sub-sub-group-3" type="checkbox" hidden />
                                        <label for="sub-sub-group-3">
                                            Third level
                                            <i class="fas fa-angle-down icon-padding"></i>
                                        </label>
                                        <ul class="sub-sub-group-list">
                                            <li class='li-vertical nav_li'>
                                                <a href="/uvdemo/page1.html">3rd level nav item</a>
                                            </li>
                                            <li class="nav_li">
                                                <a href="/uvdemo/page1.html">3rd level nav item</a>
                                            </li>
                                            <li class="nav_li">
                                                <a href="/uvdemo/page1.html">3rd level nav item</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="nav_li">
                        <input id="group-4" type="checkbox" hidden />
                        <label for="group-4" class="root-menu">
                            First level
                            <i class="fas fa-angle-down icon-padding"></i>
                        </label>
                        <ul class="group-list">
                            <li class='li-vertical nav_li'>
                                <li class="nav_li">
                                    <a href="/uvdemo/page1.html">1st level item</a>
                                </li>
                                <input id="sub-group-4" type="checkbox" hidden />
                                <label for="sub-group-4">
                                    Second leve
                                    <i class="fas fa-angle-down icon-padding"></i>l</label>
                                <ul class="sub-group-list">
                                    <li class='li-vertical nav_li'>
                                        <a href="/uvdemo/page1.html">2nd level nav item</a>
                                    </li>
                                    <li class="nav_li">
                                        <a href="/uvdemo/page1.html">2nd level nav item</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>

Answer 1

我认为您想在页面重新加载后保持所选的侧边栏打开，对吧？

您可以根据点击的导航项（例如）绑定网址哈希：

<li class="nav_li" id="item1">
    <a href="page.html#item1" title="Item 1">Item 1</a>
</li>
<li class="nav_li" id="item2">
    <a href="page.html#item2" title="Item 2">Item 2</a>
</li>

因此，在单击新链接后，您可以使用一些Javascript访问哈希，调用“ location.hash”，并将“ open”类添加到与哈希值匹配的元素上。

使用JavaScript导航到其他页面时如何打开侧边栏菜单？

1 个答案: