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

问题描述：

我为我的网站的移动版本创建了一个Jquery打开/关闭button的菜单。现在我可以打开和关闭我的菜单，但只需触摸菜单按钮，实际上，一旦打开，如果我尝试点击一个区域li.horizontal菜单仍然打开，我应该修复它，以便使菜单关闭相同的按钮和li.horizontal。此外，因为我只需要菜单的jQuery，我宁愿使用普通的JavaScript，也因为谷歌速度测试表明。如何运行JavaScript打开/关闭菜单？

对不起我的英文不好...预先感谢您的帮助:)

这下面是我当前的代码：

<head> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script> 
 
    $(document).ready(function(){ 
 
    
 
\t \t //When btn is clicked 
 
\t \t $(".btn-responsive-menu").click(function() { 
 
\t \t \t $("#menu").toggleClass("show"); 
 
\t \t 
 
\t \t }); 
 
    
 
    }); 
 
    </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>

这将有很大的帮助，如果你能提供样品作为https://jsfiddle.net/一个例子。在javascript部分中，您还可以提供像jquery这样的库，以便为想要帮助您的每个人获取代码runnig。 – meistermeier

答

试试这个点击事件点击关闭菜单

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

个香草JS

document.getElementsByClassName("horizontal")[0].addEventListener("click", function(e){ 
document.getElementById("menu").className.replace(/\bshow\b/,''); 
window.location = e.target.getAttribute("href") 
});

好吧，它的作品非常感谢你！你知道是否有一种简单的方法来获得它使用普通的JavaScript？ – alberto96

如果你不打算使用jQuery，那么你可以很容易地将其转换为javascript – madalinivascu

谢谢你的香草js，问题是我不知道javascript哈哈，所以我需要整个代码，打开按钮......我的意思是下面的JS转换 – alberto96

答

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

它工作的其他答案的代码，您的代码会关闭菜单，但它会以“未定义的黑色页面”结束。无论如何谢谢你！你现在是否有一个简单的方法来获得使用普通的JavaScript相同的结果？ – alberto96

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

相关推荐