防止下拉菜单在移动端自动重新打开
防止下拉菜单在移动端自动重新打开
提问于 2019-11-30 00:10:22
我有一个下拉列表，如下：
<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，您可以在其中看到问题，只需将视图切换到"mobile“，然后单击"PICK A SORT”下的任何算法：
如有任何帮助，将不胜感激，谢谢！
回答 1
Stack Overflow用户
发布于 2019-11-30 00:27:19
我已经看过你提到的现场网站，在componentDidUpdate()中浏览你的SortingVisualizer.js代码后，我在line number 61中看到了它，你正在调用this.showDropdown()，它在组件更新后再次打开下拉列表。
在看到你的js代码后，我想知道为什么你要移除.clicked类，因为这使得下拉列表可以隐藏(使display:none)，为什么你不在按钮单击时做，而是选择在lifeCycle上做。
在"PICK A SORT“按钮上添加一个单击事件，如下所示，并在componentDidUpdate()中删除this.showDropdown()
<button className="nav-btn pick-a-sort" onClick={this.showDropdown}>PICK A SORT:</button>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59108073
复制相关文章
相似问题
腾讯云开发者
