一页引导下拉列表在移动设备上不起作用

Question

我已经使用BS框架构建了一个单页网站，并将jquery用于以下方面：

1.点击按钮滚动页面

2.鼠标悬停时下拉菜单（如果窗口宽度大于992px）

页面滚动和鼠标悬停功能正常运行。

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

看我的代码：

 //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() {...
因此，我们基本上必须为您的下拉菜单添加一个例外，如下所示：
a(".navbar-collapse ul li:not(.dropdown) a").click(function() {...

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

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

同样由于某种原因， 悬停功能在我这边不起作用，因此我对其进行了一点编辑...万一在您的情况下可以正常工作，则可以忽略它。

干杯。