猿问

单击下拉菜单时向下拉菜单添加和删除类

正如标题所示，我试图在单击下拉菜单并“打开”时将其添加到下拉菜单中，并在下拉菜单关闭后删除相同的类。我的代码在单击/打开下拉菜单时添加该类，但在下拉菜单关闭时不会将其删除。


到目前为止，这是我的代码：


<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>


胡子哥哥
浏览 100回答 4
4回答

弑天下

该hasAttribute方法不会评估属性的值，它只是检查它是否存在，这意味着您的 if 语句错误地评估为 true。你想使用getAttribute：function inputEffect() {&nbsp; &nbsp; var button = document.getElementById("dropdownMenuButton");&nbsp; &nbsp; var element = document.getElementById("dropText");&nbsp; &nbsp; if(button.getAttribute("aria-expanded") === "true") {&nbsp; &nbsp; &nbsp; &nbsp;element.classList.remove("myEffect");&nbsp; &nbsp; &nbsp; &nbsp;button.setAttribute("aria-expanded", "false");&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp;element.classList.add("myEffect");&nbsp; &nbsp; &nbsp; &nbsp;button.setAttribute("aria-expanded", "true");&nbsp; &nbsp; }}
0

饮歌长啸

我建议您不要使用 onclick 函数，而是使用突变观察器，这样当用户单击选择和退出时它就会切换。如this fiddle所示，它不仅在单击时触发，还在选择之外单击时触发。并且您的JS将更改为：&nbsp; &nbsp; &nbsp; &nbsp; var button = document.getElementById("dropdownMenuButton");&nbsp; &nbsp; var element = document.getElementById("dropText");window.MutationObserver = window.MutationObserver&nbsp; &nbsp; || window.WebKitMutationObserver&nbsp; &nbsp; || window.MozMutationObserver;var target = document.getElementById("dropdownMenuButton");observer = new MutationObserver(function(mutation) {&nbsp; &nbsp; if(button.getAttribute("aria-expanded") == 'true') {&nbsp; &nbsp; element.classList.add("myEffect");&nbsp; &nbsp; }else{&nbsp; &nbsp; element.classList.remove("myEffect");&nbsp; &nbsp; }}),config = {&nbsp; &nbsp; attributes: true};observer.observe(target, config);https://jsfiddle.net/okv8fjgd/1/但是，如果这不是您想要实现的目标，只需将 if 语句更改为if(button.getAttribute("aria-expanded") == 'true') {&nbsp; &nbsp; element.classList.add("myEffect");&nbsp; }else{&nbsp; &nbsp; element.classList.remove("myEffect");&nbsp; }
0

开满天机

还有另一种方法可以解决这个问题，但是如果使用不当，这种方法可能会出现一些错误。另外，您必须确保下拉菜单的初始状态肯定是关闭的。您也可以将其初始状态设置为打开，但您必须相应地调整代码。只要使用方法就可以了toggle。function inputEffect() {&nbsp; &nbsp; var element = document.getElementById("dropText");&nbsp; &nbsp; element.classList.toggle("myEffect");}
0

狐的传说

该hasAttribute()方法只有一个参数。我认为您想检索属性值。你可以用getAttribute()它。function inputEffect() {&nbsp; &nbsp; var button = document.getElementById("dropdownMenuButton");&nbsp; &nbsp; var element = document.getElementById("dropText");&nbsp; &nbsp; if (button.getAttribute("aria-expanded") === true) {&nbsp; &nbsp; &nbsp; element.classList.add("myEffect");&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; element.classList.remove("myEffect");&nbsp; &nbsp; }}您还可以使用classList.toggle(<class>)来避免if完全编写该语句，而不是使用classList.add().
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答