Bootstrap菜單在手機上沒有關閉

我很努力地在手機上關閉Bootstrap菜單。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"/\t \t 
 
    <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> \t \t \t \t \t 
 
        <li><a href="#terms">Our Terms</a></li> \t \t \t \t \t 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </nav> 
 
</body>

來源

2017-04-22 Emma Hayley

解釋多一點。你的菜單在移動設備上工作 –

嗨，感謝您的回覆，問題是移動視圖上的菜單點擊時沒有關閉。當它處於漢堡佈局時，它將打開但不會關閉。 –

嘗試添加這段JavaScript代碼：

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

來源

2017-04-22 21:36:28

感謝您的回覆，我只是在 –

目前已經在bootstrap.min.js您負載，以便刪除功能腳本標籤：

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

來源

2017-04-22 21:40:19 bamdan

嗨，我已經嘗試過這個，它仍然沒有表現。當我點擊摺疊菜單時，它看起來像關閉然後再次打開。 –

根據@M_Mulhem評論首先刪除一個bootstrap.min腳本。不應該爲此需要任何其他js。 – bamdan

我剛剛複製並測試了上面的代碼，菜單也適用於手機。它打開和關閉。

我建議問題可能在代碼的其餘部分（在關閉導航標記之後）。

只需檢查是否有任何ID名稱在關閉導航標記後重復。頁面上的ID名稱應該是唯一的。

來源

2017-04-22 21:54:00

謝謝你是對的，它被引導時被稱爲兩次，一次在頭部，一次在身體末端，這顯然是關閉重新打開按鈕。乾杯 –

Bootstrap菜單在手機上沒有關閉

回答

相關問題