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片段不是必需的。

Answer 2

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

<li class="dropdown">

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

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

下一步是将类togglign仅应用于父类。

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

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

$(window).width() < 780

希望能有所帮助