下拉菜單切換旋轉箭頭

Question

我有兩個隱藏的下拉菜單。 一旦用戶單擊其中之一，它們就會顯示出來。 當一個下拉菜單打開時，它會關閉另一個。 到目前為止，這項工作非常好。 我在每個菜單中添加了一個 SVG 插入符號，當用戶單擊菜單時，它會向下旋轉（90 度）。

當另一個菜單打開時，如何將其旋轉回其初始位置（-360 度）。

var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    var dropdownContent = this.nextElementSibling;

    Array.from(document.querySelectorAll('.dropdown-container')).forEach(el => {
      if (el !== dropdownContent)
        el.style.display = 'none';
        /* if its possible rotate it back here, i couldnt access the carets here */
    });

    if (dropdownContent.style.display === "block")
      dropdownContent.style.display = "none";
    else
      dropdownContent.style.display = "block";
  });
}

.dropdown-btn {
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
  text-transform: uppercase;
  font-family: LinetoCircular;
  display: block;
  padding-left: 20px;
  z-index: 0;
}

#wrapper {
  display: flex;
}

/* hidden by default, make the content shifts under the title */
.dropdown-container {
  display: none;
  font-size: 18px;
  padding-top: 10px;
  background-color: #575757;
}

.dropdown-container a {
  color: white;
  padding-left: 30px;
}

.dropdown-container a:hover {
  background-color: #414141;
}

<div>
  <button class="dropdown-btn">
      <div id="wrapper">
          <div>Client</div>
          <div id="rotate1" class="transformButton" style="position: relative; left: 104px; top: 2px;"><!--this is the caret, may not be visible because its local--></div>
      </div>
  </button>
  <div class="dropdown-container">
    <a href="client_properties/" style="height: 30px;"><span style="font-size: 24px;">+</span>Add new</a><br>
    <a href=''>first element</a><br>
    <a href=''>second element</a><br>
  </div>
  <div>
      <button class="dropdown-btn">
          <div id="wrapper">
              <div>Car</div>
              <div id="rotate2" class="transformButton" style="position: relative; left: 104px; top: 2px;"><!--this is the caret, may not be visible because its local--> </div>
          </div>
      </button>
  </div>
    <div class="dropdown-container">
      <a href="client_properties/" style="height: 30px;"><span style="font-size: 24px;">+</span>Add new</a><br>
      <a href=''>first element</a><br>
      <a href=''>second element</a><br>
    </div>
</div>

插入符號在這里不可見，但我為它寫了。 它應該緊挨着每個下拉菜單。 現場演示： https : //jsfiddle.net/2mwr4y68/

Answer 1

所有你需要的是

• 向包裝器添加一個類，即： class="dropdown"
• 創建將添加到包裝器的 CSS 類.is-open
• 使用 JS 切換該類

 const dropdowns = document.querySelectorAll(".dropdown"); dropdowns.forEach(el => { const button = el.querySelector(".dropdown-btn"); button.addEventListener("click", () => { // Close all [...dropdowns].filter(x => x != el).forEach(el => el.classList.remove("is-open")); // Toggle one el.classList.toggle("is-open"); }); });

 /*QuickReset*/ * {margin:0; box-sizing:border-box;font:14px/1.4 sans-serif;} .dropdown-btn { border: none; background: none; cursor: pointer; outline: none; text-transform: uppercase; font-family: inherit; display: block; } .dropdown-btn::before { display: inline-block; content: "\\25BC"; transition: transform 0.3s; } .dropdown-container { display: none; padding: 10px; background-color: #575757; } .dropdown.is-open .dropdown-btn:before { transform: rotate(180deg); } .dropdown.is-open .dropdown-container { display: block; } .dropdown-container a { color: white; display: block; } .dropdown-container a:hover { background-color: #414141; }

 <div class="dropdown"> <button class="dropdown-btn">Client</button> <div class="dropdown-container"> <a href="client_properties/"><span>+</span>Add new</a> <a href=''>first element</a> <a href=''>second element</a> </div> </div> <div class="dropdown"> <button class="dropdown-btn">Car</button> <div class="dropdown-container"> <a href="client_properties/"><span>+</span>Add new</a> <a href=''>first element</a> <a href=''>second element</a> </div> </div>

上述內容不適用於.dropdown多個集合組
如果是這種情況，請將上述內容包裝起來以說明.dropdown組