Menu dropdown toggle rotate arrow

Question

Saya memiliki dua menu dropdown yang tersembunyi. Mereka ditampilkan setelah pengguna mengklik salah satunya. ketika satu menu tarik-turun terbuka, menu tarik-turun lainnya ditutup. Sejauh ini pekerjaan ini bagus. Saya menambahkan tanda sisipan SVG ke setiap menu dan bagian bawah diputar (90 derajat) saat pengguna mengklik menu.

Bagaimana saya bisa memutarnya kembali ke tempat awalnya (-360deg) ketika menu lain terbuka.

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>

Tanda sisipan tidak terlihat di sini, tetapi saya menulis untuk itu. Ini seharusnya berada di samping setiap dropdown. Demo Langsung:https://jsfiddle.net/2mwr4y68/

Answer 1

Yang Anda butuhkan hanyalah

• tambahkan kelas ke pembungkus yaitu: class="dropdown"
• Buat kelas CSS .is-openyang akan ditambahkan ke pembungkus
• Alihkan kelas itu menggunakan 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>

Hal di atas tidak dimaksudkan untuk bekerja dengan beberapa kumpulan-kelompok. .dropdown
Jika itu kasusnya, gabungkan di atas untuk memperhitungkan kelompok .dropdowns