单击内部按钮时如何隐藏下拉菜单

roy05

我有一个下拉列表,如下所示:

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

这是在线网站,您可以在其中查看问题。任何帮助是极大的赞赏!

克里斯·惠勒

您可以clicked在onclick函数的.dropdown容器中添加一个类,然后添加以下CSS:

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

然后,您必须clicked在某个时候删除该类,以使悬停效果再次起作用。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

单击按钮时如何在javascript中隐藏/显示下拉菜单

来自分类Dev

如何在使用 Tableau Reader 单击 Tableau 按钮时隐藏下拉菜单

来自分类Dev

单击下拉菜单时如何隐藏默认的<select> <option>?

来自分类Dev

当用户单击下拉菜单的一侧时,如何隐藏下拉菜单?

来自分类Dev

在下拉菜单外的任何地方单击时如何隐藏下拉菜单?

来自分类Dev

单击时隐藏下拉菜单项隐藏吗?

来自分类Dev

单击其他下拉菜单时如何隐藏Boostrap Dropdown子菜单?

来自分类Dev

jQuery下拉菜单-如何在单击主体时隐藏菜单

来自分类Dev

jQuery,单击其他位置时隐藏下拉菜单

来自分类Dev

单击项目时,下拉菜单再次隐藏然后滑动

来自分类Dev

当单击页面上的任意位置时,下拉菜单隐藏

来自分类Dev

用户单击其他位置时,如何隐藏导航栏的下拉菜单?

来自分类Dev

单击页面上任何位置时如何隐藏下拉菜单

来自分类Dev

单击下拉菜单按钮时的引导程序打开链接

来自分类Dev

如果单击主体任何元素,如何隐藏下拉菜单?

来自分类Dev

如果单击主体任何元素,如何隐藏下拉菜单?

来自分类Dev

如何通过单击下拉菜单隐藏面板?

来自分类Dev

在内部单击下拉菜单时,如何防止其关闭?

来自分类Dev

如何在单击按钮时打开下拉菜单?html

来自分类Dev

如何在单击按钮时打开下拉菜单?html

来自分类Dev

单击按钮时,如何使下拉菜单恢复为默认选择

来自分类Dev

单击后如何使登录按钮成为下拉菜单

来自分类Dev

单击按钮如何填充聚合物下拉菜单?

来自分类Dev

下拉菜单问题(按钮内部的按钮)

来自分类Dev

如何防止导航栏在单击具有下拉菜单的特定菜单项时隐藏/折叠?

来自分类Dev

kendogrid内部隐藏的下拉菜单

来自分类Dev

单击链接时如何防止此下拉菜单关闭?

来自分类Dev

如何仅在单击时显示导航栏的下拉菜单?

来自分类Dev

在gridview中单击更新时,如何显示下拉菜单?

Related 相关文章

  1. 1

    单击按钮时如何在javascript中隐藏/显示下拉菜单

  2. 2

    如何在使用 Tableau Reader 单击 Tableau 按钮时隐藏下拉菜单

  3. 3

    单击下拉菜单时如何隐藏默认的<select> <option>?

  4. 4

    当用户单击下拉菜单的一侧时,如何隐藏下拉菜单?

  5. 5

    在下拉菜单外的任何地方单击时如何隐藏下拉菜单?

  6. 6

    单击时隐藏下拉菜单项隐藏吗?

  7. 7

    单击其他下拉菜单时如何隐藏Boostrap Dropdown子菜单?

  8. 8

    jQuery下拉菜单-如何在单击主体时隐藏菜单

  9. 9

    jQuery,单击其他位置时隐藏下拉菜单

  10. 10

    单击项目时,下拉菜单再次隐藏然后滑动

  11. 11

    当单击页面上的任意位置时,下拉菜单隐藏

  12. 12

    用户单击其他位置时,如何隐藏导航栏的下拉菜单?

  13. 13

    单击页面上任何位置时如何隐藏下拉菜单

  14. 14

    单击下拉菜单按钮时的引导程序打开链接

  15. 15

    如果单击主体任何元素,如何隐藏下拉菜单?

  16. 16

    如果单击主体任何元素,如何隐藏下拉菜单?

  17. 17

    如何通过单击下拉菜单隐藏面板?

  18. 18

    在内部单击下拉菜单时,如何防止其关闭?

  19. 19

    如何在单击按钮时打开下拉菜单?html

  20. 20

    如何在单击按钮时打开下拉菜单?html

  21. 21

    单击按钮时,如何使下拉菜单恢复为默认选择

  22. 22

    单击后如何使登录按钮成为下拉菜单

  23. 23

    单击按钮如何填充聚合物下拉菜单?

  24. 24

    下拉菜单问题(按钮内部的按钮)

  25. 25

    如何防止导航栏在单击具有下拉菜单的特定菜单项时隐藏/折叠?

  26. 26

    kendogrid内部隐藏的下拉菜单

  27. 27

    单击链接时如何防止此下拉菜单关闭?

  28. 28

    如何仅在单击时显示导航栏的下拉菜单?

  29. 29

    在gridview中单击更新时,如何显示下拉菜单?

热门标签

归档