防止下拉菜单在移动设备上自动重新打开

Question

我有一个下拉列表如下：

<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，一旦单击任何选项，下拉列表会自动隐藏，直到通过将类“.clicked”添加到下拉列表中完成特定任务（排序）。任务完成后，我删除“.clicked”类。

这在桌面网站上运行良好，但在移动网站上，一旦任务完成，下拉菜单会自动重新打开，我不完全是为什么。

这是我的 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;
}

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

这是现场website，您可以在其中看到问题，只需将视图切换到“移动”并单击“选择排序”下的任何算法：

任何帮助将不胜感激，谢谢！

Answer 1

在浏览了您的代码后，我查看了您提到的实时网站 在SortingVisualizer.js 在componentDidUpdate() 我看到它在line number 61 您正在调用this.showDropdown()，在组件更新后再次打开下拉菜单。

看到您的 js 代码后，我想知道您为什么要删除 .clicked 类，因为这使下拉菜单能够隐藏（显示：无），为什么您不在按钮单击时执行此操作，而是选择在单击时执行此操作生命周期，

像这样在“PICK A SORT”按钮上添加一个点击事件并删除componentDidUpdate()中的this.showDropdown()

<button className="nav-btn pick-a-sort" onClick={this.showDropdown}>PICK A SORT:</button>