Bootstrap - 移动菜单中的下拉菜单打开正常，无法关闭下拉菜单

Posted 2023-05-08

【中文标题】Bootstrap - 移动菜单中的下拉菜单打开正常，无法关闭下拉菜单

【英文标题】：Bootstrap - drop down within mobile menu opens fine, cannot close drop down

【发布时间】：2017-12-01 22:48:20

【问题描述】：

这里是网站：https://paperfibresinc.wpengine.com/

网站需要登录才能查看，这里是凭据：

用户：demo 密码：paperfibersinc

如果您使用移动设备并单击“服务”导航菜单项，它会打开完美的下拉菜单。但是，当您尝试通过再次单击“服务”一词来关闭“服务”菜单时，什么也没有发生。

知道为什么吗？

【问题讨论】：

w3schools.com/bootstrap/bootstrap_dropdowns.asp ...点击此链接，如果您使用的是引导程序，请使用 data-toggle="dropdown" 和其他数据属性

【参考方案1】：

这是因为你使用 css 来显示下拉菜单：

.dropdown:hover .dropdown-menu 
    display: block;

如果您想在点击时隐藏下拉菜单，您可以引导组件下拉菜单。只需删除此 css 并将 data-toggle="dropdown" 添加到服务链接，然后设置您的下拉菜单样式。

【参考方案2】：

试试这个

删除这个

CSS

.dropdown:hover .dropdown-menu 
    display: block;

并添加此 html

<a title="Services" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Services <span class="caret"></span></a>

希望这会有所帮助..