Блог

Событие onclick работает только с кнопкой. Если я нажму на значок в кнопке, функция не будет работать.

enter code here

 <div class="dropdown">
  <button onclick="myFunction()" class="elementor-button-link elementor-button elementor-size-md elementor-animation-grow" id="dropbtn">
 

<i onclick=»myFunction() «класс=»far fa-стрелка-alt-круг-вниз»>

 <script>/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('#dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i  ) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>
 

enter code here

Короткий ответ: Попробуйте использовать element.closest() вместо element.matches() .

Я подозреваю, что это условие в вашем заявлении if. Судя по всему, element.matches() он будет точно соответствовать предоставленному идентификатору — т. Е. Он будет соответствовать, если у элемента, на который нажата кнопка, есть этот идентификатор, но не если вы нажмете на дочерний элемент, у которого явно нет идентификатора, даже если это делает родитель.

Согласно веб-документам Mozilla, element.closest() также должны совпадать любые элементы, родители которых соответствуют указанному условию, даже если сам элемент этого не делает.

Имейте в виду, что это изменит тип возвращаемого значения — matches() возвращает логическое значение, в то время closest() как возвращает «ближайший» элемент, соответствующий условию.