如何在点击菜单项时关闭（隐藏）移动菜单

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>