Как сделать всю кнопку нажатой? Даже элементы внутри него? - PullRequest
1 голос
/ 25 февраля 2020

Я где-то читал, что могу использовать что-то, называемое даже пузырями, и stopPropagation (); для достижения этой цели. Я нуб на Javascript, поэтому я понятия не имею, как реализовать, но это то, что я до сих пор. Я могу нажать на отступы вокруг элементов внутри кнопки, но если я нажимаю на элементы, они не вызывают событие кнопки. Есть идеи?

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
  if (!event.target.matches('.sidebar-button-switcher')) {
    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');
  }
    }
  }
}
.show {
  color: red;
}
<div class="sidebar-switcher-container">
  <button class="sidebar-button-switcher" onclick="myFunction()">
            <img class="sidebar-icon" src="" height="20" width="20">
            <h3>Switch Views</h3>
            <img class="sidebar-icon" src="" height="20" width="20">
        </button>
  <div id="myDropdown" class="dropdown-content">
    <a class="btn-active">Asker</a>
    <a class="btn-active">Tasker</a>
  </div>
</div>
...