单击其中的按钮时如何隐藏下拉菜单答案

【问题标题】：How to hide dropdown when a button inside it is clicked单击其中的按钮时如何隐藏下拉菜单
【发布时间】：2019-11-29 14: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，您可以在其中看到问题。非常感谢任何帮助！

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

您可以在 onclick 函数的 .dropdown 容器中添加 clicked 类，然后添加以下 CSS：

.dropdown.clicked:hover .dropdown-content {
    display: none;
}

您必须在某个时候删除 clicked 类才能使悬停效果再次起作用。

【讨论】：

【解决方案2】：

您可以让父节点样式显示无 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>

【讨论】：