html中的打开和关闭下拉列表

Question

当我点击按钮时，什么都没有发生。我正在努力让它们打开和关闭。我该如何解决这个问题？werrrrrrrrrrr

HTML

<div class="sidenav">
<img src="assets/images/placeholder-logo.svg">
<li ng-repeat="item in data" ng-if="dataLoaded">
<button class="dropdown-btn">{{item.streamName}}
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
<ul>
<li ng-repeat="element in item.apps">
<button class="dropdown-btn">{{element.appName}}
<i class="fa fa-caret-down" ng-if="element.sheets.length"></i>
</button>
<ul>
<li ng-repeat="sheet in element.sheets">
<button class="dropdown-btn">{{sheet.sheetName}}
</button>
</li>
</ul>
</li>
</ul>
</div>
</li>
</div>

JAVASCRIPT

var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
} 

Answer 1

您的代码正在工作，但只有在第二次单击按钮后，它才会隐藏内容区域，因为初始值dropdownContent.style.display是空字符串，但您要检查它是否等于"块"；。

因此，第一次点击按钮将内容区域设置为display: block。

您需要将支票更改为dropdownContent.style.display === ""

var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block" || dropdownContent.style.display === "") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}