Попытка создать список со складными заголовками, однако, когда я нажимаю внутри списка, он рушится.
Здесь мой javascript, (я еще не знаю jQuery)
function comFunc() {
document.getElementById("Community").classList.toggle("show");
document.onclick = function(event) {
var x = document.getElementById("Community");
var y = document.getElementById("comarrow");
if (x.classList.contains("show")) {
y.classList.remove("glyphicon-menu-right");
y.classList.add("glyphicon-menu-down");
} else {
y.classList.remove("glyphicon-menu-down");
y.classList.add("glyphicon-menu-right");
}
}
window.onclick = function(event) {
var x = document.getElementById("Community");
var y = document.getElementById("comarrow");
if (!event.target.matches('.resbtn')) {
x.classList.remove('show');
y.classList.remove("glyphicon-menu-down");
y.classList.add("glyphicon-menu-right");
}
}
}
Я попытался использовать "||" как в
if (!event.target.matches('.resbtn' || '.dropdown-content')) {
но это, похоже, не сработало.
Какие-нибудь мысли?
Как указано в Селекторах, вам нужна запятая, чтобы объединить два селектора.
Следовательно, измените:
if (!event.target.matches('.resbtn' || '.dropdown-content')) {
чтобы:
if (!event.target.matches('.resbtn, .dropdown-content')) {
document.querySelectorAll('button').forEach(function(ele, idx) {
ele.addEventListener('click', function(e) {
var x = event.target.matches('.resbtn, .dropdown-content');
console.log('matches=' + x + '\nhtml:' + this.outerHTML);
});
});
<button id="btn1" class="resbtn">Click Me</button>
<button id="btn2" class="dropdown-content">Click Me</button>
<button id="btn3" class="noOne">Click Me</button>