Перейти к публикации

Рекомендованные сообщения

Всем доброго времени суток, помогите пожалуйста кому не сложно

<div class="dropdown">
	<button onclick="myFunction()" class="dropbtn">Выпадающий</button>
	<div id="myDropdown" class="dropdown-content">
		<a href="#">Ссылка 1</a>
		<a href="#">Ссылка 2</a>
		<a href="#">Ссылка 3</a>
	</div>
</div>

<div class="dropdown1">
	<button onclick="myFunction1()" class="dropbtn1">Выпадающий</button>
	<div id="myDropdown1" class="dropdown-content1">
		<a href="#">Ссылка 1</a>
		<a href="#">Ссылка 2</a>
		<a href="#">Ссылка 3</a>
	</div>
</div>
.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {background-color: #ddd}
.show {display:block;}

.dropbtn1 {
    background-color: #71db34;
    color: rgb(224, 22, 15);
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.dropbtn1:hover, .dropbtn1:focus {
    background-color: #29b948;
}
.dropdown1 {
    position: relative;
    display: inline-block;
}
.dropdown-content1 {
    display: none;
    position: absolute;
    background-color: #4651bb;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content1 a {
    color: rgb(255, 0, 0);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content1 a:hover {background-color: #ddd}
.show1 {display:block;}
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function myFunction1() {
  document.getElementById("myDropdown1").classList.toggle("show1");
}
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn','.dropbtn1')) {
    var dropdowns = document.getElementsByClassName("dropdown-content","dropdown-content1");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show','show1')) {
        openDropdown.classList.remove('show','show1');
      }
    }
  }
}

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

Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
×
×
  • Создать...