如何在单击下拉菜单中的按钮时隐藏下拉菜单
如何在单击下拉菜单中的按钮时隐藏下拉菜单
提问于 2019-11-29 22:35:31
我有一个下拉列表，如下：
<div className="dropdown">
<button className="nav-btn pick-a-sort">PICK A SORT:</button>
<div className = "dropdown-content">
<button className="nav-btn" id = "bubble-sort" onClick = {()=>{this.bubbleSort()}}>BUBBLE SORT</button>
<button className="nav-btn" id = "selection-sort" onClick = {()=>{this.selectionSort()}}>SELECTION SORT</button>
<button className="nav-btn" id = "insertion-sort" onClick = {()=>{this.insertionSort()}}>INSERTION SORT</button>
<button className="nav-btn" id = "quick-sort" onClick = {()=>{this.quickSort()}}>QUICK SORT</button>
<button className="nav-btn" id = "merge-sort" onClick = {()=>{this.mergeSort()}}>MERGE SORT</button>
<button className="nav-btn" id = "bead-sort" onClick = {()=>{this.beadSort()}}>BEAD SORT</button>
<button className="nav-btn" id = "heap-sort" onClick = {()=>{this.heapSort()}}>HEAP SORT</button>
<button className="nav-btn" id = "radix-sort" onClick = {()=>{this.radixSort()}}>RADIX SORT</button>
</div>
</div>我已经设置了CSS，当用户“悬停”在按钮"PICK A SORT:“上时，列表是可见的。
但是，在单击任何按钮时，除非用户将光标移出，否则下拉列表将保持可见，因为光标仍然悬停在该列表上。
有没有办法在下拉列表中的按钮被点击后隐藏列表？
这是我的CSS：
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(255, 255, 255, 0.8);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .nav-btn{
display: block;
text-align: center;
width: 100%;
margin: 0 auto;
}
.dropdown:hover .dropdown-content {
display: block;
}这是实时website，您可以从中看到问题所在。任何帮助都是非常感谢的！
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-11-29 22:42:08
您可以在onclick函数的.dropdown容器中添加一个clicked类，然后添加以下CSS：
.dropdown.clicked:hover .dropdown-content {
display: none;
}然后，您必须在某个时刻删除clicked类，才能使悬停效果再次生效。
Stack Overflow用户
发布于 2019-11-29 22:57:25
您可以使parentnode样式显示无onclick事件。
<button className="nav-btn" id = "bubble-sort" onClick = {()=>{this.bubbleSort()}; this.parentNode.style.display = 'none';}>BUBBLE SORT</button>或者，您可以创建一个公共函数来调用它，这将使parentNode不显示任何内容，如下所示
let displayNone = (el) => el.parentNode.style.display = 'none';
<button className="nav-btn" id = "bubble-sort" onClick = {()=>{ this.bubbleSort()}; displayNone(this); }>BUBBLE SORT</button>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59106709
复制相关文章
相似问题
腾讯云开发者
