如何在點擊菜單項時關閉（隱藏）移動菜單

Question

我的網站出現問題時，在移動電話上看到它。我有一個按鈕用菜單項打開「table」。當我點擊某個菜單項時，打開正確的頁面，但帶菜單項的「表」未關閉。只有當我再次點擊菜單按鈕時纔會關閉。

我嘗試了所有在這裏提供的類似情況的解決方案，但沒有爲我工作。 有沒有人有線索我該如何解決這個問題？ 在此先感謝！

這裏是我的代碼：

在head標籤：

<script src="js/jquery-1.11.1.min.js"></script> 
<script src="js/templatemo_custom.js"></script> 
<script src="js/jquery.lightbox.js"></script> 
<script src="js/bootstrap-collapse.js"></script> 

在身體標記：

<nav class="navbar navbar-default" role="navigation"> 
      <div class="container-fluid"> 
      <!-- Brand and toggle get grouped for better mobile display -->   
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" 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> 
      </div>   
      <div id="top-menu"> 
       <div class="collapse navbar-collapse main_menu" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
        <li><a class="show-1 templatemo_home" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-home"></span>Početna</a></li> 
        <li><a class="show-1 templatemo_page3" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-users"></span>Čime se bavimo</a></li> 
        <li><a class="show-1 templatemo_page5" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-medkit"></span>Terapija</a></li> 
        <li><a class="show-1 templatemo_page2" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-picture-o"></span>Galerija</a></li> 
        <li><a class="show-1 templatemo_page4" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-envelope"></span>Kontakt i lokacija</a></li> 
       </ul> 
       </div> 
      </div>   
      <!-- /.navbar-collapse --> 
      </div> 
      <!-- /.container-fluid --> 
    </nav> 

Answer 1

你必須使用JavaScript爲。嘗試下面的代碼。

<script> 
    function closeFunction() 
    { 
    document.getElementById('bs-example-navbar-collapse-1').style.display='none'; 
    } 
</script> 
<nav class="navbar navbar-default" role="navigation"> 
      <div class="container-fluid"> 
      <!-- Brand and toggle get grouped for better mobile display -->   
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" 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> 
      </div>   
      <div id="top-menu"> 
       <div class="collapse navbar-collapse main_menu" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
        <li><a class="show-1 templatemo_home" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-home"></span>Početna</a></li> 
        <li><a class="show-1 templatemo_page3" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-users"></span>Čime se bavimo</a></li> 
        <li><a class="show-1 templatemo_page5"onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-medkit"></span>Terapija</a></li> 
        <li><a class="show-1 templatemo_page2" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-picture-o"></span>Galerija</a></li> 
        <li><a class="show-1 templatemo_page4" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-envelope"></span>Kontakt i lokacija</a></li> 
       </ul> 
       </div> 
      </div>   
      <!-- /.navbar-collapse --> 
      </div> 
      <!-- /.container-fluid --> 
    </nav> 

Answer 2

我已經找到了解決我的問題:)

除了OMKAR的解決方案，應該有一個更函數 - 按鈕，它的自我：

<script> 
    function closeFunction() 
    { 
     document.getElementById('bs-example-navbar-collapse-1').style.display = "none"; 

    } 
    function openFunction(){ 
    document.getElementById('bs-example-navbar-collapse-1').style.display = "initial"; 
    } 
</script> 
    <nav class="navbar navbar-default" role="navigation"> 
      <div class="container-fluid"> 
      <!-- Brand and toggle get grouped for better mobile display -->   
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" onclick="openFunction()" 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> 
      </div>   
      <div id="top-menu"> 
       <div class="collapse navbar-collapse main_menu" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
        <li><a class="show-1 templatemo_home" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-home"></span>Početna</a></li> 
        <li><a class="show-1 templatemo_page3" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-users"></span>Čime se bavimo</a></li> 
        <li><a class="show-1 templatemo_page5" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-medkit"></span>Terapija</a></li> 
        <li><a class="show-1 templatemo_page2" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-picture-o"></span>Galerija</a></li> 
        <li><a class="show-1 templatemo_page4" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-envelope"></span>Kontakt i lokacija</a></li> 
       </ul> 
       </div> 
      </div>   
      <!-- /.navbar-collapse --> 
      </div> 
      <!-- /.container-fluid --> 
    </nav>