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

Question

我想创建一个带有下拉子菜单项的响应式菜单。到目前为止，它可以在桌面上运行，但不能在移动设备上运行(我正在 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

Answer 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 代码段不是必需的。