javascript - 一页 Bootstrap 下拉菜单不适用于移动设备

Question

我用BS框架搭建了一个页面网站，将 jquery 用于:

1.点击按钮滚动页面

2. 鼠标悬停时下拉(如果窗口宽度超过 992 像素)

页面滚动和鼠标悬停功能运行良好。

但是，在移动 View 中，当我们点击下拉按钮时，菜单会折叠。

查看我的代码:

//nav manu dropdown
if ($(window).width() > 992) {
  $(function() {
    $('.dropdown').hover(function() {
        $(this).addClass('open');
      },
      function() {
        $(this).removeClass('open');
      });
  });
}
//end nav manu dropdown


//page scroll jquery
! function(a) {
  "use strict";
  a(document).on("click", "a.page-scroll", function(e) {
    var l = a(this);
    a("html, body").stop().animate({
      scrollTop: a(l.attr("href")).offset().top - 0 //id top position
    }, 1250, "easeInOutExpo"), e.preventDefault()
  }), a("body").scrollspy({
    target: ".navbar-fixed-top",
    offset: 51
  }), a(".navbar-collapse ul li a").click(function() {
    a(".navbar-toggle:visible").click()
  }), a("#mainNav").affix({
    offset: {
      top: 100
    }
  }), window.sr = ScrollReveal(), sr.reveal(".sr-icons", {
    duration: 600,
    scale: .3,
    distance: "0px"
  }, 200), sr.reveal(".sr-button", {
    duration: 1e3,
    delay: 200
  }), sr.reveal(".sr-contact", {
    duration: 600,
    scale: .3,
    distance: "0px"
  }, 300), a(".popup-gallery").magnificPopup({
    delegate: "a",
    type: "image",
    tLoading: "Loading image #%curr%...",
    mainClass: "mfp-img-mobile",
    gallery: {
      enabled: !0,
      navigateByImgClick: !0,
      preload: [0, 1]
    },
    image: {
      tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
    }
  })
}(jQuery);
//end page scroll jquery

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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="#home">Logo</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#home" class="page-scroll">Home</a></li>
        <li><a href="#service" class="page-scroll">Our Services</a></li>
        <li><a href="#">Our Coaches</a></li>
        <li><a href="#">Franchising</a></li>
        <li><a href="#">Visit Our Store</a></li>
        <!--<li><a href="#">FAQ</a></li>
<li><a href="#">Contact Us</a></li>
 If have dropdown-->
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another</a></li>
        </li>
        </ul>
    </div>
  </div>
</nav>
<div class="clearfix"></div>

<div class="top-margin"></div>
<div style="height:800px; width:100%; display:inline-block; background:#eee; padding-top:100px;" id="home">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>


<div style="height:800px; width:100%; display:inline-block; background:red;" id="service">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

还添加了 jsfiddle:https://jsfiddle.net/2kduy9vp/

任何答案将不胜感激!!

Answer 1

菜单在下拉菜单点击时折叠，因为你已经要求它在每次点击列表项时折叠，这里:
a(".navbar-collapse ul li a").click(function() {...
所以我们基本上必须为您的下拉列表添加一个异常(exception)，如下所示:
a(".navbar-collapse ul li:not(.dropdown) a").click(function() {...

这是一个 jsfiddle:https://jsfiddle.net/2kduy9vp/22/

这样，包含 dropdown 类的列表项将不会在点击时折叠整个菜单。

另外，出于某种原因，悬停功能 在我这边不起作用，所以我对其进行了一些编辑...以防您的它工作正常，您可以忽略它。

干杯。