下拉菜单切换旋转箭头

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>

Caret在这里是看不见的，但我为它写了。它应该就在每个下拉列表旁边。现场演示：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的组