Javascript-classList.toggle("my-class")不起作用，因為主類正在獲取多個

一些 Stackoverflow 用戶建議使用 classList.toggle 代替 if 和 else 條件。所以我試圖讓它在我的下拉選單中作業，但我不明白為什么它不作業。

以完全隨機的方式單擊選單項，我發現自己有div ，因此類不會像 if 和 else 條件那樣交替，但是 drop_container 類正在獲取隱藏和顯示。有什么不對 ？

編輯：感謝所有用戶的評論，我意識到我錯了。我得到的答案都是正確的，但沒有一個是我的解決方案。最接近我的問題的是用戶@jeremy-denis 給出的答案

這是我找到的解決方案：最初我認為需要兩個類來為下拉關閉設定影片，最后我意識到只有一個類就足夠了。所以我加入transition: max-height 0.3s ease;了 drop_container 類。

這樣我就不再有 classList.toggle 的初始問題。

var dropdownBtn = document.querySelectorAll('.menu-btn');
//Add this for toggling dropdown
lastOpened = null;

dropdownBtn.forEach(btn => btn.addEventListener('click', function() {
  var menuContent = this.nextElementSibling;
  menuContent.classList.toggle("show");
  
  //Add this for toggling dropdown
  if (lastOpened && lastOpened !== menuContent)
      lastOpened.classList.remove("show");
      lastOpened = menuContent;
}));

.menu-btn {
  background: #e0e0e0;
  padding: 10px;
  margin: 5px 0px 0px 0px;
}

.menu-btn:hover {
  background: #000;
  color: #fff;
}

.drop_container {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s ease-out;
}

.drop_container.show {
  max-height: 300px;
  transition: max-height 0.4s ease-in;
}

.drop_container > .item {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  padding: 10px 0px 0px 0px;
}

<div class="dropdown-menu">

<div class="menu-btn">One</div>
<div class="drop_container">
  <a class="item" href="#">Contact Us</a>
  <a class="item" href="#">Visit Us</a>
</div>

<div class="menu-btn">Two</div>
<div class="drop_container">
  <a class="item" href="#">Contact Us</a>
  <a class="item" href="#">Visit Us</a>
</div>

</div>

uj5u.com熱心網友回復：

您只需切換類顯示即可隱藏和顯示不同的元素

  menuContent.classList.toggle("show");

var dropdownBtn = document.querySelectorAll('.menu-btn');
//Add this for toggling dropdown
lastOpened = null;

dropdownBtn.forEach(btn => btn.addEventListener('click', function() {
  var menuContent = this.nextElementSibling;
  menuContent.classList.toggle("show");

  //Add this for toggling dropdown
  if (lastOpened && lastOpened !== menuContent)
    lastOpened.classList.remove("show");
  lastOpened = menuContent;
}));

.menu-btn {
  background: #e0e0e0;
  padding: 10px;
  margin: 5px 0px 0px 0px;
}

.menu-btn:hover {
  background: #000;
  color: #fff;
}

.drop_container {
  overflow: hidden;
  max-height: 0;
}

.drop_container.show {
  max-height: 300px;
  transition: max-height 0.3s ease;
}

.drop_container.hide {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

.drop_container>.item {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  padding: 10px 0px 0px 0px;
}

<div class="dropdown-menu">

  <div class="menu-btn">One</div>
  <div class="drop_container">
    <a class="item" href="#">Contact Us</a>
    <a class="item" href="#">Visit Us</a>
  </div>

  <div class="menu-btn">Two</div>
  <div class="drop_container">
    <a class="item" href="#">Contact Us</a>
    <a class="item" href="#">Visit Us</a>
  </div>

</div>

uj5u.com熱心網友回復：

我稍微改變了你的代碼。

var dropdownBtn = document.querySelectorAll('.menu-btn');
const drop_container = document.querySelectorAll('.drop_container');
//Add this for toggling dropdown
lastOpened = null;

dropdownBtn.forEach(btn => btn.addEventListener('click', function() {      
  var menuContent = this.nextElementSibling;
  drop_container.forEach(b => b.classList.remove("show"));
  menuContent.classList.toggle("show");  
 
}));

.menu-btn {
  background: #e0e0e0;
  padding: 10px;
  margin: 5px 0px 0px 0px;
  cursor: pointer;
}

.menu-btn:hover {
  background: #000;
  color: #fff;
}

.drop_container {
  max-height: 0; 
  display: none;
}

.show {
  display: block;
  max-height: 300px;
  transition: max-height 0.3s ease;  
}

.drop_container.hide {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

.drop_container > .item {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  padding: 10px 0px 0px 0px;
}

<div class="dropdown-menu">

  <div class="menu-btn">One</div>
  <div class="drop_container">
    <a class="item" href="#">Contact Us</a>
    <a class="item" href="#">Visit Us</a>
  </div>

  <div class="menu-btn">Two</div>
  <div class="drop_container">
    <a class="item" href="#">Contact Us</a>
    <a class="item" href="#">Visit Us</a>
  </div>

</div>

標籤：javascript html css

上一篇：使用jQuery設定bg顏色不會覆寫現有的顏色

下一篇：有沒有辦法將一個圖示添加到MailChimp嵌入表單的“提交”按鈕？