我有一个下拉列表如下:
<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您可以在哪里看到问题,只需将 View 切换到“移动”并单击“选择排序:”下的任何算法
任何帮助将不胜感激,谢谢!
最佳答案
在浏览了您的代码后,我查看了您提到的实时网站
在 SortingVisualizer.js
中 componentDidUpdate()
我在 第 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>
关于javascript - 防止下拉菜单在移动设备上自动重新打开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59108073/