Vanilla Javascript点击并关闭导航

时间:2017-09-22 07:08:37

标签: javascript html css

我还在学习做普通的老香草javascript。我试图隐藏我的slideToggle甚至是当用户点击任何链接时我关闭的下拉菜单的整个背景。我错过了什么,因为我没有收到任何错误,但它在slideToggle类中没有显示任何错误。

JS

var anchors = document.querySelectorAll(".a");
for (var i = 0; i < anchors.length; i++) {
     anchors[i].addEventListener('click', function(e){
var btn = document.querySelector(".slideToggle");
    if (window.getComputedStyle(btn,null).getPropertyValue("display") != 'none') {
  btn.click();
    }
  })
}

HTML

<nav id="mainNav">
    <h1 class="hidden">Main Navigation</h1>
        <button id="button"><span class="hidden">Toggle</span></button>
    <ul id="burgerMenu">
        <li><a href="#mainNav">Home</a></li> 
        <li><a href="#latestWork">Latest Work</a></li>
        <li><a href="#About">About</a></li>
        <li><a href="#rates1">Prices</a></li>
        <li><a href="#pageFooter">Contact</a></li>
        </ul>
    </nav>

1 个答案:

答案 0 :(得分:1)

而不是使用document.querySelectorAll(“。a”)使用document.querySelectorAll(“a”)。我也没有看到将slideToggle作为一个类的元素。用一个 ”。”作为选择器意味着你正在寻找一个班级。