我想在从中选择某些内容后隐藏下拉列表,但将其保留在那里以便我稍后再次悬停。
我当前的代码:
<div class="navbutton_container">
<button onclick="someFunction()"><p>Title</p></button>
<div class="nav_dropdown">
<button onclick="someFunction()"><p>Content1</p></button>
<button onclick="someFunction()"><p>Content2</p></button>
<button onclick="someFunction()"><p>Content3</p></button>
<button onclick="someFunction()"><p>Content4</p></button>
</div>
</div>
.navbutton_container > .nav_dropdown {
display: none;
opacity: 0;
}
.navbutton_container:hover > .nav_dropdown {
display: block;
opacity: 1;
position: absolute;
}
在我选择此中的任何按钮后,我希望下拉菜单暂时消失,以便在他们停止悬停在它上面之前它不会出现。在他们离开后,我希望他们可以继续前进并让 :hover 属性再次工作。
如果您认为有更好的结构,我 100% 愿意更改它!
答案 0 :(得分:1)
这里有一个方法,将使用添加类和检测鼠标退出的组合来实现目标
function someFunction() {}
window.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.navbutton_container').forEach(el => el.addEventListener('mouseover', e => {
let targ = e.target.classList.contains('navbutton_container') ? e.target : e.target.closest('.navbutton_container');
targ.querySelector('.nav_dropdown').classList.remove('hold');
}))
document.addEventListener('click', e => {
if (e.target.closest('.nav_dropdown')) {
e.target.closest('.nav_dropdown').classList.add('hold')
}
})
})
.navbutton_container>.nav_dropdown {
display: none;
opacity: 0;
}
.navbutton_container:hover>.nav_dropdown {
display: block;
opacity: 1;
position: absolute;
}
.navbutton_container:hover>.nav_dropdown.hold {
display: none;
opacity: 0;
}
<div class="navbutton_container">
<button onclick="someFunction()" class='toggler'><p>Title</p></button>
<div class="nav_dropdown ">
<button onclick="someFunction()"><p>Content1</p></button>
<button onclick="someFunction()"><p>Content2</p></button>
<button onclick="someFunction()"><p>Content3</p></button>
<button onclick="someFunction()"><p>Content4</p></button>
</div>
</div>
<div class="navbutton_container" style='margin-top:100px'>
<button onclick="someFunction()" class='toggler'><p>Title</p></button>
<div class="nav_dropdown ">
<button onclick="someFunction()"><p>Content1</p></button>
<button onclick="someFunction()"><p>Content2</p></button>
<button onclick="someFunction()"><p>Content3</p></button>
<button onclick="someFunction()"><p>Content4</p></button>
</div>
</div>