问题描述
我希望导航栏 @Component
@Validated
public class MyComponent {
public void myValidatedMethod(@Size(min = 1,max = 30) String input) {
// method body
}
)
在我点击时消失。使用 <ul>，我选择了导航栏中的所有 querySelectorAll()。然后我给它添加了一个点击事件监听器。所以当我点击它时，它应该将导航栏 <li> 的类切换为“活动”然后消失。
它适用于切换按钮，但不适用于 <ul>。
<li>解决方法
querySelectorAll 返回一个 NodeList。您必须迭代列表并将事件侦听器添加到每个节点。
例如：
var togglebtn = document.getElementById("togglebtn");
togglebtn.addEventListener("click",function() {
ul.classList.toggle("active");
});
var nodeList = document.querySelectorAll(".jsscrolltrigger");
var ul = document.getElementById("ul");
nodeList.forEach(node => {
node.addEventListener("click",function() {
ul.classList.toggle("active");
});
})<i id="togglebtn" class="fas fa-bars"></i>
<nav class="navbar">
<div class="brand-title">brandName</div>
<div class="navbar-links">
<ul id="ul">
<li class="jsscrolltrigger"><a href="#logo">Start</a></li>
<li class="jsscrolltrigger"><a href="#Galerie">Galerie</a></li>
<li class="jsscrolltrigger"><a href="#Adresse">Anfahrt</a></li>
<li class="jsscrolltrigger"><a href="#Speisekarte">Speisekarte</a></li>
</ul>
</div>
</nav>当您使用 Document.querySelectorAll() 时，它不会返回单个元素。它返回一个 NodeList，您可以在该 forEach 上调用 let a = document.querySelectorAll('.jsscrolltrigger');
let ul = document.getElementById("ul");
a.forEach(function(element) {
element.addEventListener('click',function(e){
e.preventDefault();
ul.classList.toggle("active");
});
}); 以循环遍历所有项目。
.active {
border: 2px solid red;
}<nav class="navbar">
<div class="brand-title">brandName</div>
<div class="navbar-links">
<ul id="ul">
<li class="jsscrolltrigger"><a href="#logo">Start</a></li>
<li class="jsscrolltrigger"><a href="#Galerie">Galerie</a></li>
<li class="jsscrolltrigger"><a href="#Adresse">Anfahrt</a></li>
<li class="jsscrolltrigger"><a href="#Speisekarte">Speisekarte</>
</li>
</ul>
</div>
</nav>forEach如果您不想使用 NodeList 来执行循环，您可以通过将 Array 传递给 Array.from() 方法来强制将 Array.from(a).map(function(){ /*...*/ });
Array.from(a).filter(function(){ /*...*/ });
视为 NavigationHelpersCommon它允许您对选定元素执行任何数组操作
goBack()