理想情况下,当我单击导航图标时,它将显示一个菜单,用户可以在其中单击进行导航。但是,似乎javascript无法识别导航图标正在被点击。
假设要做的是在单击导航图标时将“打开”类添加到导航主目录。
Nav源代码:
<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")
})
}
}
});
答案 0 :(得分: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>