正如标题所示，我试图在单击下拉菜单并“打开”时将其添加到下拉菜单中，并在下拉菜单关闭后删除相同的类。我的代码在单击/打开下拉菜单时添加该类，但在下拉菜单关闭时不会将其删除。到目前为止，这是我的代码：<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 回答
弑天下
TA贡献1818条经验 获得超8个赞
该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");
}
}
饮歌长啸
TA贡献1951条经验 获得超3个赞
我建议您不要使用 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");
}
开满天机
TA贡献1786条经验 获得超12个赞
还有另一种方法可以解决这个问题，但是如果使用不当，这种方法可能会出现一些错误。另外，您必须确保下拉菜单的初始状态肯定是关闭的。您也可以将其初始状态设置为打开，但您必须相应地调整代码。只要使用方法就可以了toggle。
function inputEffect() {
var element = document.getElementById("dropText");
element.classList.toggle("myEffect");
}
狐的传说
TA贡献1804条经验 获得超3个赞
该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().
- 4 回答
- 0 关注
- 99 浏览
添加回答
举报
0/150
提交
取消