如何切換“活動”類但再次單擊時將其隱藏

我有一個串列項選單，當我單擊當前li它會切換.active類并使背景變為綠色。但是，當我單擊另一個時li，它仍然顯示單擊的上一個 li 的綠色背景。我該如何做到這一點，以便在單擊一個專案時，它會在單擊時切換其背景，但在單擊另一個 li 時也會將其洗掉？

<ul class="menu-wrapper">
    <li><a class="js-accordion-header">item 1</a></li>
    <li><a class="js-accordion-header">item 1</a></li>
    <li><a class="js-accordion-header">item 1</a></li>
</ul>

$(".template-in-conversation .js-accordion-header").on("click", function() { 
    $(this).toggleClass("active");
    $(this).siblings("a").removeClass("active");
});

uj5u.com熱心網友回復：

你不需要 jQuery 來完成這個簡單的任務。只需使用element.classList.toggle('active', bool). 無需與兄弟姐妹等一起摸索。

const items = document.querySelectorAll('.js-accordion-header');
document.querySelector('.menu-wrapper').addEventListener(
  'click', 
  ({target}) => {
    for (const item of items) item.classList.toggle('active', target === item);
  }
);

.active {
  background-color: yellow;
}

<ul class="menu-wrapper">
  <li><a class="js-accordion-header">item 1</a></li>
  <li><a class="js-accordion-header">item 2</a></li>
  <li><a class="js-accordion-header">item 3</a></li>
</ul>

第二個引數決定是toggle（add如果布林值是true）還是remove（如果布林值是false）：

target === item

只需回答“元素是否單擊了當前迭代的元素？”這一問題即可實作目標。如果是，則添加該類，如果不是，則將其洗掉。

如果您還需要允許通過再次單擊來關閉已經處于活動狀態的元素，則需要展開條件：

target === item && !target.classList.contains('active')

const items = document.querySelectorAll('.js-accordion-header');
document.querySelector('.menu-wrapper').addEventListener(
  'click', 
  ({target}) => {
    for (const item of items) {
      item.classList.toggle('active', target === item && !target.classList.contains('active'));
    }
  }
);

.active {
  background-color: yellow;
}

<ul class="menu-wrapper">
  <li><a class="js-accordion-header">item 1</a></li>
  <li><a class="js-accordion-header">item 2</a></li>
  <li><a class="js-accordion-header">item 3</a></li>
</ul>

uj5u.com熱心網友回復：

問題是，$(this)在您的處理程式的背景關系中是錨點，當您呼叫.siblings()它時，您沒有兄弟姐妹，因為錨點在<li/>包含它的父級內部沒有兄弟姐妹。相反，您可以導航到父節點，從那里獲取兄弟節點，然后定位其中的錨點：

$(".template-in-conversation .js-accordion-header").on("click", function() { 
    $(this).toggleClass("active");
    $(this).parent().siblings().find("a").removeClass("active");
});

.active {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu-wrapper template-in-conversation">
    <li><a class="js-accordion-header">item 1</a></li>
    <li><a class="js-accordion-header">item 1</a></li>
    <li><a class="js-accordion-header">item 1</a></li>
</ul>

uj5u.com熱心網友回復：

錨不是彼此的兄弟姐妹，解決方案是向上ul使用parents()，然后a在其中找到所有內容ul

$(() => {
  $(".js-accordion-header").on("click", function() {
    $(this).parents("ul").find("a.active").removeClass("active");
    $(this).toggleClass("active");
  });
});

.active {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu-wrapper">
  <li><a class="js-accordion-header">item 1</a></li>
  <li><a class="js-accordion-header">item 1</a></li>
  <li><a class="js-accordion-header">item 1</a></li>
</ul>

uj5u.com熱心網友回復：

如果您還需要切換相同的單擊元素，則可以執行以下操作：

$(".template-in-conversation .js-accordion-header").on("click", function() { 
    $(this).toggleClass('active');
    $(this).parent().siblings().children().removeClass('active');
});

.active {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu-wrapper template-in-conversation">
    <li><a class="js-accordion-header">item 1</a></li>
    <li><a class="js-accordion-header">item 1</a></li>
    <li><a class="js-accordion-header">item 1</a></li>
</ul>

標籤：jQuery css

上一篇：獲取多個資料元素類并放入DOMelmenent

下一篇：jQuery腳本上未捕獲的ReferenceError