Bootstrap菜单未在移动设备上关闭

Question

I'm struggling to get a Bootstrap menu to close on mobile. 我很难在移动设备上关闭Bootstrap菜单。

I've read most post but a lot of examples aren't really helping. 我读过大多数帖子，但很多例子并没有真正起作用。

Here's my code: 这是我的代码：

 <head> <title>Night Owlets Babysitting | Milton Keynes, Bedford and Surrounding Areas</title> <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"> <link rel="icon" href="img/favicon.ico" type="image/x-icon"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection" content="telephone=no" / <meta name="description" content="Night Owlets Babysitting - Affordable - Reliable - Trustworhy Babysitting in Milton Keynes, Bedford and surrounding areas"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> <!-- jQuery--> <link rel="stylesheet" href="css/font-awesome.min.css"> <link href="css/style.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Numans" /> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-97888100-1', 'auto'); ga('send', 'pageview'); </script> <script> $(document).on('click','.navbar-collapse.in',function(e) { if( $(e.target).is('a') ) { $(this).collapse('hide'); } }); </script> </head> <body id="page-top"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header page-scroll"> <button id="academy-navbar-collapse" type="button" class="navbar-toggle" 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"><h1 style="margin-top:-9px">Night Owlets</h1></a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" > <ul class="nav navbar-nav navbar-right"> <li class="hidden"> <a href="#page-top"></a> </li> <li><a href="#page-top" >Night Owlets</a></li> <li><a href="#aboutus">About Us</a></li> <li><a href="#contactus">Contact Us</a></li> <li><a href="#Testimonies">Testimonies</a></li> <li><a href="#fees">Our Fees</a></li> <li><a href="#terms">Our Terms</a></li> </ul> </div> </div> </nav> </body>

Answer 1

Try adding this javascript code: 尝试添加此javascript代码：

    $(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a') ) {
        $(this).collapse('hide');
    }
});

Answer 2

There is already the functionality in bootstrap.min.js which you load so delete the script tag: 您已加载bootstrap.min.js中的功能，因此请删除脚本标记：

<script>
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') ) {
    $(this).collapse('hide');
}
});
</script>

Answer 3

I've just copied and tested your code above and the menu works fine on mobiles too. 我刚刚复制并测试了上面的代码，菜单也适用于手机。 It opens and closes. 它打开和关闭。

I suggest the problem could be somewhere on the rest your code( after the closing nav tag). 我建议问题可能在你的代码的其余部分（在关闭nav标签之后）。

Just check if any ID name is repeated after the closing nav tag. 只需检查关闭导航标记后是否重复任何ID名称。 ID names on a page should be unique. 页面上的ID名称应该是唯一的。

Bootstrap菜单未在移动设备上关闭

问题描述

3 个解决方案

解决方案1
0 已采纳 2017-04-22 21:36:28

解决方案2
0 2017-04-22 21:40:19

解决方案3
0 2017-04-22 21:54:00

Bootstrap菜单未在移动设备上关闭

问题描述

3 个解决方案

解决方案1 0 已采纳 2017-04-22 21:36:28

解决方案2 0 2017-04-22 21:40:19

解决方案3 0 2017-04-22 21:54:00

解决方案1
0 已采纳 2017-04-22 21:36:28

解决方案2
0 2017-04-22 21:40:19

解决方案3
0 2017-04-22 21:54:00