как изменить 2 элемента одновременно с помощью addEventListener javascript

Question

Итак, у меня есть classList.toggle, который просто открывает и закрывает раскрывающееся меню, а второй переключатель меняет класс на стрелку (вверх и вниз).

Я хочу иметь возможность закрыть выпадающее меню, щелкнув за его пределами.

Мне удалось добиться этого либо для выпадающего меню, либо для стрелки. не оба сразу.

Как я могу щелкнуть вне выпадающего меню, когда оба события происходят одновременно?

Я должен сказать, что это метод W3s.

Все еще новичок в javascript, любая помощь будет оценена!

Спасибо,

Вот что у меня есть:

function dropdownsortby() {
   document.getElementById("arrow").classList.toggle("down");
   document.getElementById("hidedefault").classList.toggle("show");
}

    window.onclick = function(event) { 
  if (!event.target.matches('.Sortby')) { 

    var arrow = document.getElementsByClassName("up"); 
    var i; 
    for (i = 0; i < arrow.length; i++) { 
      var changearrow = arrow[i]; 
      if (changearrow.classList.contains('down')) { 
        changearrow.classList.remove('down'); 
      }
    }
  }
}

window.onclick = function(event) {
  if (!event.target.matches('.Sortby')) { 


    var dropdowns = document.getElementsByClassName("sortbybuttons");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

Answer 1

Взглянув на код, который у вас есть, я думаю, что ваша проблема связана с двойным назначением события onclick для объекта window, что, как я понимаю, перезапишет любую первую функцию onclick, которая была назначена первой. Мой рекомендуемый подход состоял бы в том, чтобы объединить обе функции в одно onclick событие, так как они, похоже, были заключены в один и тот же оператор if, а функциональность каждой из них, похоже, не конфликтует с другой. Следующий фрагмент демонстрирует, как это будет выглядеть.

window.onclick = function(event) { 
  if (!event.target.matches('.Sortby')) { 

    let arrow = document.getElementsByClassName("up"); 
    for (let i = 0; i < arrow.length; i++) { 
      var changearrow = arrow[i]; 
      if (changearrow.classList.contains('down')) { 
        changearrow.classList.remove('down'); 
      }
    }

   var dropdowns = document.getElementsByClassName("sortbybuttons");
   for (let j = 0; j < dropdowns.length; j++) {
     var openDropdown = dropdowns[j];
     if (openDropdown.classList.contains('show')) {
       openDropdown.classList.remove('show');
     }
   }
 }
}

Answer 2

Почему бы просто не объединить оба набора логики в один и тот же обработчик?

window.onclick = function (event) {
    if (!event.target.matches('.Sortby')) {
        var arrow = document.getElementsByClassName("up");
        var dropdowns = document.getElementsByClassName("sortbybuttons");
        var i, j;

        for (i = 0; i < arrow.length; i++) {
            var changearrow = arrow[i];
            if (changearrow.classList.contains('down')) {
                changearrow.classList.remove('down');
            }
        }

        for (j = 0; j < dropdowns.length; j++) {
            var openDropdown = dropdowns[j];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}