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

getElementsByClassName返回一个元素数组，使用索引获取实际的DOM元素。
display: show不是有效的CSS。您可以使用内联块，内联，块，表格单元等...

这是一个工作片段。

＆＃13;

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

＆＃13;

 .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;}

＆＃13;

<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>

＆＃13;

Answer 2

show css属性没有值display。试试：

.show {
 display:block;
}

正如Tobiq所提到的那样 - getElementsByClassName返回一个数组。使用jquery并将类设置为所有元素，或者从数组中选择一个索引并将其设置在特定元素上。

下拉列表不会在点击事件中切换

2 个答案: