Добавление и удаление класса в раскрывающемся списке при нажатии на раскрывающемся списке. - PullRequest
Новая
       0

Добавление и удаление класса в раскрывающемся списке при нажатии на раскрывающемся списке.

0 голосов
/ 27 марта 2020

Когда читается заголовок, я пытаюсь добавить класс в раскрывающееся меню, когда он нажимается и является "открытым", и удалить тот же класс, когда закрывающееся меню закрывается. Мой код добавляет класс при нажатии / открытии раскрывающегося меню, но не удаляет его при закрытии раскрывающегося меню.

Пока это мой код: 

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

0 голосов
/ 27 марта 2020

Я бы посоветовал вам не использовать функцию onclick, а наблюдатель мутаций, поэтому он будет переключаться, когда пользователи нажимают на кнопку выбора и выходят. Как видно из этой скрипки , она срабатывает не только при щелчке, но и при нажатии на кнопку выбора. И ваш 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");
  }
0 голосов
/ 27 марта 2020

Метод 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");
    }

}
0 голосов
/ 27 марта 2020

Есть и другой способ решения этой проблемы, но этот метод может иметь некоторые ошибки, если не используется должным образом. Кроме того, вам необходимо убедиться, что начальное состояние раскрывающегося списка обязательно будет закрыто. Вы также можете иметь его начальное состояние как открытое, но вам придется соответствующим образом настроить код. Просто используйте метод toggle. 

function inputEffect() {
    var element = document.getElementById("dropText");
    element.classList.toggle("myEffect");
}
0 голосов
/ 27 марта 2020

Метод 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().

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...