单击下拉菜单时向下拉菜单添加和删除类
正如标题所示，我试图在单击下拉菜单并“打开”时将其添加到下拉菜单中，并在下拉菜单关闭后删除相同的类。我的代码在单击/打开下拉菜单时添加该类，但在下拉菜单关闭时不会将其删除。
到目前为止，这是我的代码：
<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>
胡子哥哥4回答
-
弑天下
该hasAttribute方法不会评估属性的值，它只是检查它是否存在，这意味着您的 if 语句错误地评估为 true。你想使用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"); }} -
饮歌长啸
我建议您不要使用 onclick 函数，而是使用突变观察器，这样当用户单击选择和退出时它就会切换。如this fiddle所示，它不仅在单击时触发，还在选择之外单击时触发。并且您的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"); } -
开满天机
还有另一种方法可以解决这个问题，但是如果使用不当，这种方法可能会出现一些错误。另外，您必须确保下拉菜单的初始状态肯定是关闭的。您也可以将其初始状态设置为打开，但您必须相应地调整代码。只要使用方法就可以了toggle。function inputEffect() { var element = document.getElementById("dropText"); element.classList.toggle("myEffect");} -
狐的传说
该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().
随时随地看视频慕课网APP
相关分类
Html5