单击下拉列表时，向下拉列表中添加和删除类

正如标题所示，当下拉菜单被点击并"打开"时，我试图将一个类添加到下拉菜单中，并在下拉菜单关闭后删除同一个类。我的代码在单击/打开下拉菜单时添加类，但在关闭下拉菜单时不会删除它。

这是我迄今为止的代码：

<html>
<head>
</head>
<body>

<div class="dropdown" id="dropDownDiv">
<button class="btn btn-secondary dropdown-toggle dropdownButton" type="button" 
id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" 
onclick="inputEffect()">
<span class="dropdownText" id="dropText">Vælg mærke</span><i
class="fas fa-chevron-down fasDropDown"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>

</div>  
</body>
</html>
<script>
function inputEffect() {
var button = document.getElementById("dropdownMenuButton");
var element = document.getElementById("dropText");
if(button.hasAttribute("aria-expanded", "true")) {
element.classList.add("myEffect");
}
}
</script>
<style>
.myEffect {
position: absolute;
left: 11% !important;
top: -35% !important;
background-color: white;
color: #3faf8f;   
}
</style>

hasAttribute()方法只有一个参数。我认为您需要检索属性值。您可以使用getAttribute()。

function inputEffect() {
var button = document.getElementById("dropdownMenuButton");
var element = document.getElementById("dropText");
if (button.getAttribute("aria-expanded") === true) {
element.classList.add("myEffect");
} else {
element.classList.remove("myEffect");
}
}

您也可以使用classList.toggle(<class>)来避免完全编写if语句，而不是使用classList.add()。

hasAttribute方法不计算属性的值，它只是检查它是否存在，这意味着if语句的计算结果不正确。您想要使用getAttribute:

function inputEffect() {
var button = document.getElementById("dropdownMenuButton");
var element = document.getElementById("dropText");
if(button.getAttribute("aria-expanded") === "true") {
element.classList.remove("myEffect");
button.setAttribute("aria-expanded", "false");
} else {
element.classList.add("myEffect");
button.setAttribute("aria-expanded", "true");
}
}

还有另一种方法可以解决这个问题，但如果使用不当，这种方法可能会出现一些错误。此外，您必须确保下拉列表的初始状态肯定会关闭。你也可以将它的初始状态设置为打开，但你必须相应地调整代码。只需使用方法toggle。

function inputEffect() {
var element = document.getElementById("dropText");
element.classList.toggle("myEffect");
}

我建议您不要使用onclick函数，而是使用突变观测器，这样当用户单击select和out时，它会切换。如图所示，它不仅在点击时触发，而且在选择之外也会触发。您的JS将更改为：

var button = document.getElementById("dropdownMenuButton");
var element = document.getElementById("dropText");
window.MutationObserver = window.MutationObserver
|| window.WebKitMutationObserver
|| window.MozMutationObserver;
var target = document.getElementById("dropdownMenuButton");
observer = new MutationObserver(function(mutation) {
if(button.getAttribute("aria-expanded") == 'true') {
element.classList.add("myEffect");
}else{
element.classList.remove("myEffect");
}
}),
config = {
attributes: true
};
observer.observe(target, config);

https://jsfiddle.net/okv8fjgd/1/

但是，如果这不是您想要实现的，只需将if语句更改为

if(button.getAttribute("aria-expanded") == 'true') {
element.classList.add("myEffect");
}else{
element.classList.remove("myEffect");
}

相关内容

最新更新

热门标签：