Нажатие в раскрывающемся меню закрывает его, несмотря на JavaScript

1

Попытка создать список со складными заголовками, однако, когда я нажимаю внутри списка, он рушится.

Здесь мой 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-statement
drop-down-menu

1 ответ

0
Лучший ответ

Как указано в Селекторах, вам нужна запятая, чтобы объединить два селектора.

Следовательно, измените:

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>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню