我为我的网站的移动版本创建了一个带有Jquery打开/关闭button
的菜单。现在我可以打开和关闭我的菜单,但只有触摸菜单按钮,事实上,一旦打开,如果我尝试点击一个部分li.horizontal
菜单仍然打开,我应该按顺序修复它使用相同的按钮和li.horizontal
关闭菜单。此外,由于我只需要jQuery菜单,我更喜欢使用纯JavaScript,因为Google Speed测试表明了这一点。
对不起我的英语不好......提前感谢您的帮助:)。
以下是我目前的代码:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
//When btn is clicked
$(".btn-responsive-menu").click(function() {
$("#menu").toggleClass("show");
});
});
</script>
</head>
<body>
<div class="btn-responsive-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<section id="home">
<header>
<!-- i contenuti -->
<div id="menu" class="">
<ul>
<li class="horizontal"><a href="#home">home</a></li>
<li class="horizontal"><a href="#theatres_museums">theatres & museums</a></li>
<li class="horizontal"><a href="#luxury_houses">luxury houses</a></li>
<li class="horizontal"><a href="#retail">retail</a></li>
<li class="horizontal"><a href="#hotels">hotels</a></li>
<li class="horizontal"><a href="#yacht">yacht</a></li>
<li class="horizontal"><a href="#design">design</a></li>
<li class="horizontal"><a href="news.html">news</a></li>
<li class="horizontal"><a href="contacts.html">contacts</a></li>
</ul>
</div>
&#13;
答案 0 :(得分:0)
尝试此点击事件以关闭li点击
上的菜单$('.horizontal').click(function(){
$("#menu").removeClass("show");
window.location = $(this).find(a).attr('href');
});
vanilla js
document.getElementsByClassName("horizontal")[0].addEventListener("click", function(e){
document.getElementById("menu").className.replace(/\bshow\b/,'');
window.location = e.target.getAttribute("href")
});
答案 1 :(得分:0)
$('.horizontal').click(function(event){
$("#menu").removeClass("show");
window.location = $(event.target).attr('href');
});