Question

我为我的网站的移动版本创建了一个带有Jquery打开/关闭button的菜单。现在我可以打开和关闭我的菜单，但只有触摸菜单按钮，事实上，一旦打开，如果我尝试点击一个部分li.horizontal菜单仍然打开，我应该按顺序修复它使用相同的按钮和li.horizontal关闭菜单。此外，由于我只需要jQuery菜单，我更喜欢使用纯JavaScript，因为Google Speed测试表明了这一点。

对不起我的英语不好......提前感谢您的帮助:)。

以下是我目前的代码：

＆＃13;

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

Answer 1

尝试此点击事件以关闭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")
});

Answer 2

$('.horizontal').click(function(event){
   $("#menu").removeClass("show");
   window.location = $(event.target).attr('href');
});

如何运行javascript打开/关闭菜单？

2 个答案: