Question

我不知道为什么我的代码无法正常工作。我在JQuery中找到了解决方案，但仍然需要了解它在Vanilla版本的JS中是如何工作的。我知道这个问题已经有人问过了，但是我的逻辑似乎还不错。为什么我的点击事件不起作用？

当我单击打开的课程时，时间框课程应显示或隐藏。

这是我的代码：

document.onload = function() {
let timeBox = document.getElementsByClassName(".time-box");
let open = document.getElementsByClassName(".open");

open.addeventListener("click", function() {
 if (timeBox.style.display === "block"){
    timeBox.style.display = "none";

}else if (timeBox.style.display === "none"){

    timeBox.style.display = "block";
} 
});
};

<div class="hours">
          <p id='ang' class="open ang">
          11:00 AM - 9:00 PM
          </p>
       </div>
       <div class="time-box">
       <ul>
       <li>Sunday:    11.00AM - 5.00PM</li>
        <li>Monday:    11.00AM - 6.00PM</li>
        <li>Tuesday:   11.00AM - 6.00PM</li>
        <li>Wednesday: 11.00AM - 9.00PM</li>
        <li>Thursday:  11.00AM - 9.00PM</li>
        <li>Friday:    11.00AM - 9.00PM</li>
        <li>Saturday:  11.00AM - 5.00PM</li>
       </ul>
       </div>

在Vanilla JS中切换元素

0 个答案: