Question

我正在看W3学校的这段代码

<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {

var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
  var openDropdown = dropdowns[i];
  if (openDropdown.classList.contains('show')) {
    openDropdown.classList.remove('show');
  }
}
}
}
</script>

我知道它的作用（打开和关闭一个下拉导航栏），但我不知道每行代码的含义/它是如何做到的。我想知道这里是否有人会善意地评论/注释每行代码，以及它可以进一步理解它并从中学习。

感谢

Answer 1

function myFunction() {
 document.getElementById("myDropdown").classList.toggle("show");
}

实际上这里发生了两件事

document.getElementById("myDropdown")

这里的文档是指整个html（DOM）页面。 getElementById是DOM中本机可用的函数，这段代码通过ID myDropdown查找HTML元素

classList.toggle("show");

classlist是元素属性，包含当前类的列表。这会将此元素类更改为显示

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {

每当单击窗口时执行此功能。现在根据以前的代码，我会把它作为练习让你理解下面的代码 if（！event.target.matches（＆＃39; .dropbtn＆＃39;））{

var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
  var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
  openDropdown.classList.remove('show');
   }
  }
 }
}

我建议你尝试去其他网站学习和使用堆栈溢出只有当你遇到无法解决的问题。我会推荐这个网站codecamp并尝试在线搜索。网上有很多文章。祝你学习愉快

JS代码：评论

1 个答案: