Question

下拉菜单切换旋转箭头

2020-10-07

5022

javascript html jquery

我有两个隐藏的下拉菜单。用户单击其中一个时，它们就会显示出来。当一个下拉菜单打开时，另一个会关闭。到目前为止，效果还不错。我在每个菜单中添加了一个 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

您所需要的只是 Details HTML 元素：

.dropdown-container { 
  padding: 10px;
  background-color: #575757;
  color: #fff;
}

<details>
  <summary>Client</summary>
  <div class="dropdown-container">
    Some content one
  </div>
</details>

<details class="dropdown">
  <summary>Car</summary>
  <div class="dropdown-container">
    Some content two
  </div>
</details>

否则，使用 JavaScript：

向包装器添加一个类，即： 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;
  color: #fff;
}

.dropdown.is-open .dropdown-btn:before {
  transform: rotate(180deg);
}

.dropdown.is-open .dropdown-container {
  display: block;
}

<div class="dropdown">
  <button class="dropdown-btn" type="button">Client</button>
  <div class="dropdown-container">
    Some content one
  </div>
</div>

<div class="dropdown">
  <button class="dropdown-btn" type="button">Car</button>
  <div class="dropdown-container">
    Some content two
  </div>
</div>

以上内容不适用于多个 .dropdown 集合组>
如果是这种情况，请包装上述内容以考虑 .dropdown 组