function select() {
const optionMenus = document.querySelectorAll('.select__menu');
optionMenus.forEach(optionMenu => {
const selectBtn = optionMenu.querySelector('.select__btn');
const options = optionMenu.querySelectorAll('.select__option');
const sBtntext = optionMenu.querySelector('.select__input');
if (optionMenu) {
selectBtn.addEventListener("click", function(e) {
let elem_active = optionMenu.classList.contains("_active")
optionMenus.forEach(opt => {
opt.classList.remove('_active');
})
optionMenu.classList.toggle("_active", !elem_active)
});
options.forEach(option => {
option.addEventListener("click", function(e) {
if (e.target.classList.contains('.select__option-text') != null) {
sBtntext.value = e.target.innerText;
// // //
document.querySelector('.total').innerHTML = e.target.innerText;
// // //
};
options.forEach(el => {
el.classList.remove('_active');
});
option.classList.add("_active");
optionMenu.classList.remove("_active")
});
});
window.addEventListener('click', e => {
const target = e.target
if (!target.closest('.select__options') && !target.closest('.select__menu')) {
optionMenu.classList.remove("_active")
}
})
}
})
}
select()
.section {
padding: 10px;
background-color: #010915;
height: 90vh;
}
.section-block-one {
height: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #1c344b;
}
.section-block-two {
width: 200px;
height: 200px;
background-color: white;
}<div class="container">
<div class="item">
<div class="item-wrapper">
<div class="visible-block">
Какой-то контент, который виден по умолчанию
</div>
<div class="hidden-block">
Контент, который появляется при наведении мыши на item
</div>
</div>
</div>
<div class="item">
<div class="item-wrapper">
<div class="visible-block">
Какой-то контент, который виден по умолчанию
</div>
<div class="hidden-block">
Контент, который появляется при наведении мыши на item
</div>
</div>
</div>
<div class="item">
<div class="item-wrapper">
<div class="visible-block">
Какой-то контент, который виден по умолчанию
</div>
<div class="hidden-block">
Контент, который появляется при наведении мыши на item
</div>
</div>
</div>
<div class="item">
<div class="item-wrapper">
<div class="visible-block">
Какой-то контент, который виден по умолчанию
</div>
<div class="hidden-block">
Контент, который появляется при наведении мыши на item
</div>
</div>
</div>
<div class="item">
<div class="item-wrapper">
<div class="visible-block">
Какой-то контент, который виден по умолчанию
</div>
<div class="hidden-block">
Контент, который появляется при наведении мыши на item
</div>
</div>
</div>
</div>.container {
max-width: 800px;
padding: 10px;
margin: 0 auto;
border: 2px solid #000;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
gap: 25px;
}
.item {
text-align: center;
flex: 0 1 240px;
box-sizing: border-box;
position: relative;
}
.item .item-wrapper {
border: 1px solid red;
background: #fff;
}
.item:hover .item-wrapper {
position: absolute;
top: 0;
left: 0;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
min-height: 100px;
z-index: 2;
}
.item:hover .hidden-block {
display: block;
padding: 0 20px 20px 20px;
}
.item .visible-block {
padding: 20px;
}
.hidden-block {
display: none;
}$('.menu-item-1689').on('click', function() {
$('html,body').animate({scrollTop: $('.kol-scrol').offset().top}, 1000);
});
$('.menu-item-1690').on('click', function() {
$('html,body').animate({scrollTop: $('.pr-scrol').offset().top}, 1000);
});
$('.menu-item-1691').on('click', function() {
$('html,body').animate({scrollTop: $('.dost-scrol').offset().top}, 1000);
});
$('.menu-item-1692').on('click', function() {
$('html,body').animate({scrollTop: $('.onas-scrol').offset().top}, 1000);
});
$('.menu-item-1693').on('click', function() {
$('html,body').animate({scrollTop: $('.kont-scrol').offset().top}, 1000);
});