javascript - 单击导航图标时不显示菜单

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>