Dropdown-Menü umschalten Drehpfeil

Question

Ich habe zwei Dropdown-Menüs, die ausgeblendet sind. Sie werden angezeigt, sobald der Benutzer auf eine davon klickt. Wenn ein Dropdown-Menü geöffnet ist, wird das andere geschlossen. Diese Arbeit bisher so gut. Ich habe jedem Menü ein SVG-Caret hinzugefügt und es wird nach unten gedreht (90 Grad), wenn der Benutzer auf ein Menü klickt.

Wie kann ich es wieder an seinen ursprünglichen Platz (-360 Grad) drehen, wenn ein anderes Menü geöffnet ist?

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>

Caret ist hier unsichtbar, aber ich habe das dafür geschrieben. Es sollte sich direkt neben jedem Dropdown befinden. Live-Demo:https://jsfiddle.net/2mwr4y68/

Answer 1

Alles was Sie brauchen ist zu

• Fügen Sie den Wrappern eine Klasse hinzu, z. class="dropdown"
• Erstellen Sie eine CSS-Klasse .is-open, die den Wrappern hinzugefügt wird
• Schalten Sie diese Klasse mit JS um

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>

Das Obige ist nicht für die Verwendung mit mehreren Sammlungsgruppen von gedacht. .dropdown
Wenn dies der Fall ist, wickeln Sie das Obige ein, um Gruppen von .dropdowns zu berücksichtigen