如何在悬停而不是单击时使Twitter引导程序(对于Wordpress!)菜单下拉列表

Jam*_*mes 1 wordpress twitter-bootstrap drop-down-menu

我已经基于wordpress版本的bootstrap构建了一个自定义wordpress主题,我试图在悬停时打开下拉导航栏,而不是点击.

我在这里找到了这个答案,但似乎它解决了原始(无wordpress)引导程序.无论是那个还是我都不清楚如何实现它,但它看起来像是wordpress的不同.

我几乎设法通过在bootstrap-dropdown.js文件中用"hover"替换"click"来实现它,但是当我移动光标时,我实际上无法将鼠标移动到子菜单项,因为下拉消失了下拉列表不会保持打开状态.

理想情况下,它将悬停在桌面上,仍然可以点击移动设备,但这不是必须的.我将牺牲点击手机悬停在桌面上.

如果有人可以帮忙解决这个问题,那就太棒了.

小智 7

解决此问题有三个步骤:

1)只需将此代码添加到主题 - >库 - > css - > bootstrap.css中的bootstrap.css中

ul.nav li.dropdown:hover ul.dropdown-menu {
display: block;    
}
Run Code Online (Sandbox Code Playgroud)

这是一个使用CSS而不是触及Javascript或JQuery的快速修复.但是,当您将鼠标悬停在菜单上时,这可能会导致一些错误的UI行为.

2)您将无法链接到父类别.要解决这个问题,请转到主题的functions.php,然后在第417行删除它:

class="dropdown-toggle" data-toggle="dropdown"
Run Code Online (Sandbox Code Playgroud)

所以你的行将是:

$attributes .= '';
Run Code Online (Sandbox Code Playgroud)

3)如果将光标从父类别移动到下拉菜单太慢,菜单将关闭.这是因为留有余量.要解决这个问题,请将此代码添加到bootstrap.css中的第一个代码下面:

.navbar .dropdown-menu {
 margin-top: 0px;
}
Run Code Online (Sandbox Code Playgroud)

就是这样,你的Wordpress Bootstrap主题现在可以在不点击父类别的情况下显示下拉菜单.