Question

我很难在移动设备上关闭Bootstrap菜单。

我读过大多数帖子，但很多例子并没有真正起作用。

这是我的代码：

<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

尝试添加此javascript代码：

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

Answer 2

您加载了bootstrap.min.js中的功能，因此请删除脚本标记：

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

Answer 3

我刚刚复制并测试了上面的代码，菜单也适用于手机。它打开和关闭。

我建议问题可能在你的代码的其余部分（关闭nav标签之后）。

只需检查关闭导航标记后是否重复任何ID名称。页面上的ID名称应该是唯一的。

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

3 个答案: