javascript - 下拉菜单不在点击事件中切换

Question

这看起来很简单，但我不知道我错过了什么。

我有这个下拉菜单

<div class="col-3">
<div class="dropdown">
  <button onclick=openPayment() class="dropdown__btn"><span class="fas fa-book mr-2"></span>My Lessons<i class=" ml-2 fas fa-caret-down"></i></button>
  <div id="PaymentDropdown" class="dropdown__content">
    <a href="#">Math</a>
    <a href="#">Science</a>
    <a href="#">History</a>
    <a href="#">English</a>
  </div>
</div>

这是该下拉菜单的 css。

 .dropdown{
  position: relative;
  display: inline-block;
}

.dropdown__btn{
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  min-width: 200px;
  border: none;
  cursor: pointer;
}

.dropdown__btn:hover, .dropdown__btn:focus{
  background-color: #2980B9;
}

.dropdown__content{
  display: none;
  background-color: #f1f1f1;
  width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown__content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown__content a:hover {background-color: #ddd}

.show {display:show;}

现在在我的 .dropdown__content 类中，我让它在 css 中不显示 此 div 还与“PaymentDropdown”共享一个 id

我构建了这个函数来切换隐藏菜单的显示和隐藏，但它似乎不起作用。这段代码在 w3 学校遵循相同的实现，所以我不确定我错过了什么。

 function openPayment() {
  document.getElementsByClassName('dropdown__content').classList.toggle("show");
}

Answer 1

1. getElementsByClassName 返回元素数组，使用索引获取实际 DOM 元素。

2. display: show 不是有效的 CSS。您可以使用 inline-block、inline、block、table-cell 等...

这是一个工作片段。

function openPayment() {
  var content1 = document.getElementsByClassName('dropdown__content')[0];
  content1.classList.toggle("show");
}

 .dropdown{
  position: relative;
  display: inline-block;
}

.dropdown__btn{
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  min-width: 200px;
  border: none;
  cursor: pointer;
}

.dropdown__btn:hover, .dropdown__btn:focus{
  background-color: #2980B9;
}

.dropdown__content{
  display: none;
  background-color: #f1f1f1;
  width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown__content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown__content a:hover {background-color: #ddd}

.show {display: block;}

<div class="col-3">
<div class="dropdown">
  <button onclick="openPayment()" class="dropdown__btn"><span class="fas fa-book mr-2"></span>My Lessons<i class=" ml-2 fas fa-caret-down"></i></button>
  <div id="PaymentDropdown" class="dropdown__content">
    <a href="#">Math</a>
    <a href="#">Science</a>
    <a href="#">History</a>
    <a href="#">English</a>
  </div>
</div>