Javascript 防止在移动设备上自动重新打开下拉列表

我有一个下拉列表如下：

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

在这里，您可以看到问题所在，只需将视图切换到“mobile”，然后单击“PICK A SORT:”下的任何算法即可

---

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

在阅读了您的代码之后，我查看了您提到的live网站 在

SortingVisualizer.js

中的

componentdiddupdate（）

我在第61行中看到了它 您正在调用

this.showDropdown（）

，在组件更新之后，它将再次打开下拉列表

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

像这样在“选择排序”按钮上添加一个单击事件，并删除

this.showDropdown（）

中的

componentdiddupdate（）

选择一个排序：

我可能会问一个问题，我到底是如何知道您的组件名称的，因为我安装了react devtools，并且能够从中看到您的代码，所以showDropdown（）只是删除单击的类-showDropdown（）{const dropdown=document.getElementsByClassName（“dropdown”）[0]；dropdown.className=“dropdown”}似乎适用于桌面，但没有在那里重新打开下拉列表。但我想这可能是因为伪类被设置为hover？为什么您的hideDropdown（）会添加一个单击的类。。。它不是用来隐藏的吗？所以现在它工作正常了？？？。。。你不必把代码放在这里，我可以看到：）我猜这是糟糕的类命名，但如果你看“点击”类，它会将显示更改为“无”

.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;
}

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