1

我已经基于wordpress 版本的引导程序构建了一个自定义 wordpress 主题，我试图让下拉导航栏在悬停而不是单击时打开。

我在这里找到了这个答案，但它似乎解决了原始（无 wordpress）引导程序。要么那个，要么我只是不清楚如何实现它，但它看起来对于 wordpress 来说只是不同。

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

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

如果有人可以帮助解决这个问题，那就太棒了。

4

3 回答 3

7

解决此问题的三个步骤：

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 主题现在应该可以工作，而无需单击父类别以显示下拉菜单。

于 2013-01-10T01:25:02.123 回答
1

我所做的是将此行添加到下拉样式附近的 bootstrap.css 中：

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

希望有帮助。

于 2012-07-18T22:47:47.827 回答
0

这适用于 Wordpress Bootstrap：

.navbar .nav > li > .dropdown-menu:after, .navbar .nav > li > .dropdown-menu:before {
    content: none;
}
于 2013-03-15T18:53:39.520 回答