Я где-то читал, что могу использовать что-то, называемое даже пузырями, и 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>