<div class="js__dropdown">
<div class="dropdown js__dropdown-toggle">Интернет-витрина</div>
<div class="dropdown__content">
информационная витрина
<button class="js__dropdown-close" type="button">
<svg class="close__icon">
<use xlink:href="sprite.svg#close"></use>
</svg>X
</button>
</div>
</div>
<div class="js__dropdown">
<div class="dropdown js__dropdown-toggle">компании Group</div>
<div class="dropdown__content">
Наш сайт является
<button class="js__dropdown-close" type="button">
<svg class="close__icon">
<use xlink:href="sprite.svg#close"></use>
</svg>X
</button>
</div>
</div>
body {
display: flex;
}
.close__icon,
.dropdown__content {
display: none;
}
.dropdown {
width: 220px;
padding: 5px;
margin-right: 15px;
background-color: #82ffee;
cursor: pointer;
}
.dropdown__content {
width: 220px;
padding: 15px 5px;
background-color: #ccc;
}
.dropdown-active .dropdown__content {
display: block;
}
document.addEventListener("DOMContentLoaded", () => {
const dropdown = document.querySelectorAll(".js__dropdown");
const dropdownActive = "dropdown-active";
document.addEventListener("click", (event) => {
dropdown.forEach((item) => {
if (!event.composedPath().includes(item)) {
item.classList.remove(dropdownActive);
}
});
});
dropdown.forEach((item) => {
item.addEventListener("click", (event) => {
if (
event.target.classList.contains("js__dropdown-toggle") ||
event.target.closest(".js__dropdown-close")
) {
item.classList.toggle(dropdownActive);
}
});
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.