悬停时激活引导下拉菜单答案

【问题标题】：Activating bootstrap dropdown menu on hover悬停时激活引导下拉菜单
【发布时间】：2014-08-30 05:22:54
【问题描述】：

我在悬停时激活引导下拉菜单时遇到了一些问题 - 它仅在点击时有效。这是 Bootply 版本：Bootply version

任何建议我做错了什么？

【问题讨论】：

可能重复？ link
这是一个不同类型的菜单，所以它不是重复的

标签： javascript css twitter-bootstrap-3

【解决方案1】：

现有代码解决方案

要使用现有代码，请将以下行添加到悬停侦听器：

$($(this).data('target')).collapse('show');

bootply 的工作分支：http://www.bootply.com/FRv5lVuiJk

重构代码解决方案

话虽如此，使用标签有一种更有效的方法。工作示例见http://www.bootply.com/TjqIiOM7Hi，代码如下。

HTML

<div class="container">
<nav class="navbar navbar-default" role="navigation" id="topmenu">
<ul class="nav navbar-nav">
  <li class="dropdown active">
    <a href="#one" data-toggle="tab">One</a>
  </li>
  <li class="dropdown">
    <a href="#two" data-toggle="tab">Two</a>
  </li>
  <li class="dropdown">
    <a href="#three" data-toggle="tab">Three</a>
  </li>
</ul>
</nav>
<nav class="navbar navbar-default right tab-content" role="navigation" id="submenu">
<ul class="nav navbar-nav tab-pane active" id="one">
  <li><a href="#" id="">One sub 1</a></li>
  <li><a href="#" id="">One sub 2</a></li>
  <li><a href="#" id="">One sub 3</a></li>
  <li><a href="#" id="">One sub 4</a></li>
</ul>
<ul class="nav navbar-nav tab-pane" id="two">
  <li><a href="#" id="">Two sub 1</a></li>
  <li><a href="#" id="">Two sub 2</a></li>
  <li><a href="#" id="">Two sub 3</a></li>
</ul>
 <ul class="nav navbar-nav tab-pane" id="three">
  <li><a href="#" id="">Three sub 1</a></li>
  <li><a href="#" id="">Three sub 2</a></li>
</ul>
</nav>
</div>

Javascript

$('[data-toggle=tab]').hover(function (e) {
  $(this).click();
});

【讨论】：

这就是我想要的。感谢您的帮助！

【解决方案2】：

你可以这样做。无需 JavaScript

HTML：

    <div class="dropdown">
        <button class="">
            <a class="">Dropdown</a>
        </button>
        <div class="dropdown-content">
        <a class="dropdown-item">Item 1</a>
        <a class="dropdown-item">Item 2</a>
        <a class="dropdown-item">Item 3</a>
        </div>
    </div>

您显然可以根据自己的喜好更改样式，但与显示相关的代码很重要。

CSS：

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color:#6c757d;
}

只需将菜单插入到您想要的位置以及引导类即可。

【讨论】：