悬停时激活引导下拉菜单 [英] Activating bootstrap dropdown menu on hover

查看:83
本文介绍了悬停时激活引导下拉菜单的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在悬停时启动引导下拉菜单时遇到了一些问题 - 它只能在点击时工作。以下是Bootply版本: Bootply版本

I have some problem with activating bootstrap dropdown menu on hover - it only works on click. Here is the Bootply version: Bootply version

任何建议我做错了什么?

Any suggestions what I'm doing wrong?

推荐答案

现有代码解决方案



要使用您现有的代码,请将以下行添加到您的悬停侦听器:

Existing Code Solution

To use your existing code, add the following line to your hover listener:

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

您的bootply的工作叉: http://www.bootply.com/FRv5lVuiJk

Working fork of your bootply: http://www.bootply.com/FRv5lVuiJk

话虽如此,有一个更有效的方法使用选项卡。有关示例,请参见 http://www.bootply.com/TjqIiOM7Hi ,代码如下。

That being said, there is a more effecient way of doing this using tabs. See http://www.bootply.com/TjqIiOM7Hi for a working example, and the code is below.

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

Javascript

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

这篇关于悬停时激活引导下拉菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆