ДВА вопроса о показе / скрытии переключателей (и их скрытии, если щелкнуть за пределами div) - PullRequest
Новая
       11

ДВА вопроса о показе / скрытии переключателей (и их скрытии, если щелкнуть за пределами div)

0 голосов
/ 25 июня 2018

Я хотел бы включить два переключателя кнопок, чтобы показать / скрыть два разных элемента и скрыть эти элементы при нажатии за пределами области div.Я занимался исследованиями весь день, и, хотя я нашел ответы для работы только с одним элементом, я не могу заставить его работать с двумя.Второй элемент просто не отображается, если я добавляю код, который нужно скрывать при нажатии за пределами div.Вот код: 

function myFunction() {

  document.getElementById("myDropdown").classList.toggle("show");

}

function myOtherFunction() {
  document.getElementById("myResponsive").classList.toggle("show");

}

window.onclick = function(e) {

  if (!(e.target.matches('.dropbtn') || e.target.matches('.mobile-button'))) {

    var myDropdown =
      document.getElementById("myDropdown");

    var myResponsive =
      document.getElementById("myResponsive");

    if ((myDropdown.classList.contains('show')) ||
      (myResponsive.classList.contains('show'))) {

      myDropdown.classList.remove('show');

      myResponsive.classList.remove('show');

    }
  }
}
.dropdown-content {
  display: none;
  float: left
}

.responsive-menu {
  display: none;
  float: left;
}

.show {
  display: block;
}
<div>
  <button class="dropbtn" onclick="myFunction()">menu1</button>
  <div class="dropdown-content" id="myDropdown">
    <a href="">item 1</a>
    <a href="">item 2</a>
  </div>
</div>
<div>
  <button class="mobile-button" id="mobileMenu" onclick="myOtherFunction()">menu2</button>

  <div class="responsive-menu" id="myResponsive">
    <a href="">item1</a><br>
    <a href="">item2</a>
  </div>
</div>

Немного помощи и советов будет высоко ценится.Большое спасибо.

1 Ответ

0 голосов
/ 25 июня 2018

Ваш код не работает, потому что вы неправильно используете метод Element.matches.Метод Element.matches принимает только один аргумент, соответствующий селектору, которому вы хотите соответствовать ( см. Здесь ).Вы передали ему два аргумента, а он просто игнорирует второй.

Чтобы исправить, просто измените оператор if следующим образом, чтобы правильно использовать метод Element.matches: 

if (!(e.target.matches('.dropbtn') || e.target.matches('.mobile-button')))
...