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

Question

我的网站在手机上显示时出现问题。我有一个按钮可以打开带有菜单项的“表格”。当我单击某个菜单项时，会打开正确的页面，但没有关闭带有菜单项的“表格”。只有当我再次点击菜单按钮时它才会关闭。

我尝试了此处提供的针对类似情况的所有解决方案，但没有一个对我有用。 有谁知道我该如何解决这个问题？ 提前致谢！

这是我的代码：

在头标签中：

<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>