单击菜单项时如何在移动设备上关闭(隐藏)菜单
How to close(hide) menu on mobile when menu item is clicked
我的网站在移动设备上出现问题 phone。我有一个按钮可以打开 "table" 和菜单项。当我单击某些菜单项时,会打开正确的页面,但没有关闭带有菜单项的 "table"。只有当我再次点击菜单按钮时它才会关闭。
我尝试了此处提供的针对类似情况的所有解决方案,但没有一个对我有用。
有谁知道我该如何解决这个问题?
提前致谢!
这是我的代码:
在头标签中:
<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>
为此你必须使用 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>
我找到了解决问题的办法:)
除了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>
我的网站在移动设备上出现问题 phone。我有一个按钮可以打开 "table" 和菜单项。当我单击某些菜单项时,会打开正确的页面,但没有关闭带有菜单项的 "table"。只有当我再次点击菜单按钮时它才会关闭。
我尝试了此处提供的针对类似情况的所有解决方案,但没有一个对我有用。 有谁知道我该如何解决这个问题? 提前致谢!
这是我的代码:
在头标签中:
<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>
为此你必须使用 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>
我找到了解决问题的办法:)
除了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>