Question

尝试在结尾处实现以下代码段：

需要var menulinks = document.querySelector('.nav-wrap a'); 选择div中的所有<a>标记，而不仅仅是第一个。
添加简单函数 - 触发menulinks函数（基本上关闭菜单窗格），然后查看<a>标记是否有#到a 相应的页面锚点，如果是，则平滑滚动到标记。这个理想情况下，功能如上所述，但可以使用网站范围内的平滑滚动锚点。
最后，对代码或方法的任何一般清理建议进一步简化它会有所帮助，仍在学习JQuery。

＆＃13;

var menu = document.querySelector('.nav-btn');
var menulinks = document.querySelector('.nav-wrap a'); //FOR EACH STATEMENT?

function toggleMenu(event) {
  'use strict';
  if (!menu.classList.contains('active')) {
    menu.classList.add('active');
    $(".nav-wrap").addClass("nav-push");
  } else {
    menu.classList.remove('active');
    $(".nav-wrap").removeClass("nav-push");
  }
  event.preventDefault();
}
menu.addEventListener('click', toggleMenu, false);
menulinks.addEventListener('click', toggleMenu, false);

＆＃13;

Answer 1

您需要使用querySelectorAll来选择与给定选择器匹配的所有元素。

但是你需要迭代元素集并添加点击处理程序。

var menu = document.querySelector('.nav-btn');
var menulinks = document.querySelectorAll('.nav-wrap a');

function toggleMenu(event) {
  'use strict';
  if (!menu.classList.contains('active')) {
    menu.classList.add('active');
    $(".nav-wrap").addClass("nav-push");
  } else {
    menu.classList.remove('active');
    $(".nav-wrap").removeClass("nav-push");
  }
  event.preventDefault();
}

menu.addEventListener('click', toggleMenu, false);
for (var i = 0; i < menulinks.length; i++) {
  menulinks[i].addEventListener('click', toggleMenu, false);
}

.active {
  color: green
}
.nav-push {
  background-color: lightgray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="nav-btn">nav-btn</button>
<div class="nav-wrap">
  <a href="#">1</a><br />
  <a href="#">2</a><br />
  <a href="#">3</a><br />
</div>

但是因为你有jQuery

$('.nav-btn, .nav-wrap a').click(function() {
  $('.nav-btn').toggleClass('active');
  $(".nav-wrap").toggleClass("nav-push", $('.nav-btn').hasClass('active'));
})

.active {
  color: green
}
.nav-push {
  background-color: lightgray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="nav-btn">nav-btn</button>
<div class="nav-wrap">
  <a href="#">1</a><br />
  <a href="#">2</a><br />
  <a href="#">3</a><br />
</div>

JQuery：document.querySelector不工作？

1 个答案: