时间戳

首页 > 解决方案 > 单击下拉菜单时向下拉菜单添加和删除类

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

问题描述

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

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

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

标签： javascripthtmlcss

解决方案

该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>)to 避免if完全编写语句，而不是使用classList.add().

推荐阅读