点击时隐藏下拉菜单

Question

我想在从中选择某些内容后隐藏下拉列表，但将其保留在那里以便我稍后再次悬停。

我目前的代码：

<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% 愿意更改它！

Answer 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>