Bootstrap 3 响应式下拉悬停菜单在移动设备上不起作用答案

【问题标题】：Bootstrap 3 responsive dropdown hover menu doesn't work on mobileBootstrap 3 响应式下拉悬停菜单在移动设备上不起作用
【发布时间】：2016-12-23 10:16:33
【问题描述】：

我想创建一个带有下拉子菜单项的响应式菜单。到目前为止，它可以在台式机上运行，但不能在移动设备上运行（我正在 iPhone 5s 上进行测试）。

这是我的代码：

<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand page-scroll" href="#page-top" style="padding-top: 0px !important">

      </a>
    </div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu1</a>
      <ul class="dropdown-menu">
        <li>
          <a href="#">Submenu1</a>
        </li>
        <li>
          <a href="#">Submenu2</a>
        </li>
        <li>
          <a href="#">Submenu3</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Menu2</a>
    </li>
    <li>
      <a href="#">Menu3</a>
    </li>
    <li>
      <a href="#">Menu4</a>
    </li>
    <li>
      <a href="#">Menu5</a>
    </li>
  </ul>
</div>

我尝试通过两种方式解决问题：

1. 我尝试添加 jquery（但后来我意识到我不足以单独编写一个好的代码） - 我还读到我应该使用“listenWidth()”但我真的不知道怎么办。

function dropdown() {
  if ($(window).width() >= 780) {
    jQuery('ul.nav li.dropdown').hover(function() {
      jQuery(this).find('.dropdown-menu').stop(true, true).delay(50).fadeIn();
    }, function() {
      jQuery(this).find('.dropdown-menu').stop(true, true).delay(50).fadeOut();
    });
}
}

// Execute on load
dropdown();
// Bind event listener
$(window).resize(dropdown);

2. 我尝试使用 hidden-xs、visible-xs 来实现，但效果不佳。

请帮帮我！

谢谢， F

【问题讨论】：

尝试将您的桌面浏览器调整为移动屏幕大小并测试下拉菜单。有效吗？
我只是不明白，触摸设备（尤其是移动设备）上的可悬停下拉菜单。由于触摸是他们唯一的指针，我不认为悬停功能真的很有必要。顺便说一句，您的代码实际上正在我现在正在使用的 Xperia mini 上运行。这是您的代码的demo。

标签： jquery html css drop-down-menu twitter-bootstrap-3

【解决方案1】：

您的代码看起来不错。检查是否在 bootsrtap JS 之前添加了 jQuery 库。

我添加了以下内容，当我将浏览器调整为 xs 宽度时，您的代码可以正常工作：

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

http://codepen.io/pavithraolety/pen/vKbGXL/

您的 jquery sn-p 不是必需的。

【讨论】：

【解决方案2】：

要打开下拉引导程序将类“open”添加到

<li class="dropdown">

因此，要正确打开它，您应该添加/删除它。

$('a.dropdown-toggle').hover(function(e) {
   $('li.dropdown').toggleClass('open');
})

下一步是仅将类切换应用到父级。

$('a.dropdown-toggle').hover(function(e) {
  $(e.currentTarget).parent().toggleClass('open');
})

接下来，此处理程序不应在触摸屏上执行...请记住，移动设备可以与 TV + 鼠标连接。这很难检查和处理，但如果你不关心它，就像你一样从这个事件中返回

$(window).width() < 780

希望有帮助

【讨论】：