如何让twitter自举(适用于Wordpress!)在悬停时下拉菜单，而不是单击

Question

我已经建立了一个基于bootstrap for wordpress版本的自定义wordpress主题，我正在尝试让下拉式导航栏在悬停时打开，而不是点击。

我在这里找到了this answer，但它似乎解决了原始的(没有wordpress)引导程序。要么是这样，要么就是我不清楚如何实现它，但它看起来只是不同于wordpress。

通过在bootstrap-dropdown.js文件中用"hover“替换"click”，我几乎成功地做到了这一点，但是我实际上不能将鼠标移到子菜单项，因为我一移动光标下拉菜单就消失了，下拉菜单也不能保持打开状态。

理想情况下，它将在桌面上悬停，在移动上仍然点击，但这不是必须的。我将牺牲移动设备上的点击，而将鼠标悬停在桌面上。

如果有人能帮上忙，那就太棒了。

Answer 1

有三个步骤可以解决这个问题：

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

ul.nav li.dropdown:hover ul.dropdown-menu {
display: block;    
}

这是一个快速修复方法，只需使用CSS，而不涉及Javascript或JQuery。然而，当你悬停菜单时，这可能会导致一些错误的UI行为。

2)您将无法链接到父类别。要解决此问题，请转到主题的functions.php并在第417行删除此代码：

class="dropdown-toggle" data-toggle="dropdown"

所以你的代码行是：

$attributes .= '';

3)如果将光标从父类别移动到下拉菜单的速度太慢，则菜单将关闭。这是因为留了一个空白处。要解决此问题，请在bootstrap.css中的第一个代码下面添加以下代码：

.navbar .dropdown-menu {
 margin-top: 0px;
}

就是这样，你的Wordpress Bootstrap主题现在应该可以工作了，而不需要单击父类别来显示下拉菜单。

Answer 2

我所做的就是将这一行添加到我的bootstrap.css中dropdown样式附近：

.dropdown.open .dropdown-menu {
  ..........
/*--- Hover Dropdown Menu---*/
ul.nav li.dropdown:hover ul.dropdown-menu {
    display: block;    
}
.dropdown-menu:before {
............

希望这能有所帮助。

Answer 3

这适用于Wordpress Bootstrap：

.navbar .nav > li > .dropdown-menu:after, .navbar .nav > li > .dropdown-menu:before {
    content: none;
}