导航图标在单击时不显示菜单

Question

理想情况下，当我单击导航图标时，它将显示一个菜单，用户可以在其中单击进行导航。 但是，似乎javascript无法识别正在导航的导航图标。

假定要做的是在单击导航图标时将“打开”类添加到导航主目录。

导航源代码：

<nav class="nav-main">
    <ul class="nav-list">
        <li>
            <a class="nav-logo" href="index.html">
                <img src="assets/logo/logo.png" alt="Logo" style="width: 50px; height: 45px;">
            </a>
        </li>
        <li class="with-sub">
            <a class="hvr-underline-from-center">
                <span> Projects</span>
                <svg width="9" height="5">
                    <polyline class="sub-arrow" fill="none" stroke="#999" points=".5 .5 4.5 4.5 8.5 .5"></polyline>
                </svg>
            </a>
            <ul class="sub">
                <li>
                    <a class>Test</a>
                </li>
                <li>
                    <a class>Test</a>
                </li>
                <li>
                    <a class>Test</a>
                </li>
                <li>
                    <a class>Test</a>
                </li>
                <li>
                    <a class>Test</a>
                </li>
                <li>
                    <a class>Test</a>
                </li>

            </ul>


        </li>
        <li>
            <a class="hvr-underline-from-center"> About </a>
        </li>
        <li>
            <a class="hvr-underline-from-center" href="Contact/index.html"> Contact </a>
        </li>
        <li>
            <a class="hvr-underline-from-center" href="#footer-nav"> Navigate </a>
        </li>
    </ul>
    <span class="nav-icon">
        <svg width="18" height="11" viewBox="0 0 18 11">
          <path fill="#000" fill-rule="evenodd" d="M0,10 L18,10 L18,11 L0,11 L0,10 Z M0,5 L18,5 L18,6 L0,6 L0,5 Z M0,0 L18,0 L18,1 L0,1 L0,0 Z"></path>
        </svg>
      </span>

</nav>

JavaScript代码：

document.addEventListener("DOMContentLoaded", function() {
    var nav = document.querySelectorAll(".nav-main")[0];
    if (nav !== undefined) {
        var navIcon = nav.querySelector(".nav-icon");
        var list = nav.querySelector(".nav-list");
        if (navIcon) {
            navIcon.addEventListener("click", function() {
                nav.classList.toggle("open");
                document.body.classList.toggle("no-scroll");
                list.scrollTop = 0;
                document.querySelector("html").classList.toggle("no-scroll")
            })
        }
        var subs = document.querySelectorAll(".with-sub");
        for (i = 0, len = subs.length; i < len; i++) {
            sub = subs[i];
            sub.addEventListener("click", function(event) {
                var target;
                target = event.currentTarget.querySelector(".sub");
                target.classList.toggle("active")
            })
        }
    }
});

Answer 1

您的javascript似乎运行良好，但是由javascript控制的css类呢？

如果我正确理解了您的问题，则认为您需要这样的东西：

 document.addEventListener("DOMContentLoaded", function() { var nav = document.querySelectorAll(".nav-main")[0]; if (nav !== undefined) { var navIcon = nav.querySelector(".nav-icon"); var list = nav.querySelector(".nav-list"); if (navIcon) { navIcon.addEventListener("click", function() { nav.classList.toggle("open"); document.body.classList.toggle("no-scroll"); list.scrollTop = 0; document.querySelector("html").classList.toggle("no-scroll") }) } var subs = document.querySelectorAll(".with-sub"); for (i = 0, len = subs.length; i < len; i++) { sub = subs[i]; sub.addEventListener("click", function(event) { var target; target = event.currentTarget.querySelector(".sub"); target.classList.toggle("active") }) } } }); 

 .hover-cursor { cursor: pointer; } .nav-main .nav-list { display: none; } .nav-main.open .nav-list { display: block; } .sub { display: none; } .sub.active { display: block; } 

 <nav class="nav-main"> <span class="nav-icon hover-cursor"> <svg width="18" height="11" viewBox="0 0 18 11"> <path fill="#000" fill-rule="evenodd" d="M0,10 L18,10 L18,11 L0,11 L0,10 Z M0,5 L18,5 L18,6 L0,6 L0,5 Z M0,0 L18,0 L18,1 L0,1 L0,0 Z"></path> </svg> </span> <a class="nav-logo" href="index.html"> <img src="https://www.google.com/logos/doodles/2018/holidays-2018-northern-hemisphere-day-3-5708260869931008-s.png" alt="Logo"> </a> <ul class="nav-list"> <li class="with-sub"> <a class="hvr-underline-from-center hover-cursor"> <span>Projects</span> <svg width="9" height="5"> <polyline class="sub-arrow" fill="none" stroke="#999" points=".5 .5 4.5 4.5 8.5 .5"></polyline> </svg> </a> <ul class="sub"> <li> <a class>Test</a> </li> <li> <a class>Test</a> </li> <li> <a class>Test</a> </li> <li> <a class>Test</a> </li> <li> <a class>Test</a> </li> <li> <a class>Test</a> </li> </ul> </li> <li> <a class="hvr-underline-from-center"> About </a> </li> <li> <a class="hvr-underline-from-center" href="Contact/index.html"> Contact </a> </li> <li> <a class="hvr-underline-from-center" href="#footer-nav"> Navigate </a> </li> </ul> </nav>