javascript - 单击按钮时显示导航栏-之后不会关闭

因此，我在网站上设置了新的导航，以便现在将其隐藏为图标并在单击时显示。再次单击，应该再次隐藏菜单，但是不会。

菜单关闭示例：



菜单示例：



单击三个条形图标将打开您在第二个示例中看到的四个菜单按钮，但是当我尝试单击该按钮以关闭菜单时，它什么也没做...即使应该也是如此。任何解决此问题的帮助将不胜感激。

HTML：

<div class="menu-button">
        <a href="#main_nav" id="access_nav"><i class="fa fa-bars"></i></a>
    </div>

    <nav id="main_nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</div>

CSS：

/* ------------------------------------------------------------------- */
/* Navigation Section
---------------------------------------------------------------------- */

.menu-button {
    padding-top:25px;
    padding-left:30px;
    float:left;
}

.menu-button a {
    color:#eee;
}

.menu-button a:hover {
    color:#940002;
}

#main_nav {
    display:none;
    position: absolute;
    padding-left: 40px;
    padding-top: 10px;
}

#main_nav ul {
    list-style-type:none;
}

#main_nav li {
    display:inline;
    margin:0 10px;
}

#main_nav a {
    text-decoration:none;
    color:#fff;
}


.with_nav #main_nav {
    display: block;
}


#main_nav:target {
    display: block;
}

JavaScript：

<!-- JavaScript
================================================== -->
<script src="https://use.fontawesome.com/430ad8b17b.js"></script>
<script>
var nav = document.getElementById('access_nav'),
    body = document.body;

nav.addEventListener('click', function(e) {
    body.className = body.className? '' : 'with_nav';
    e.preventDefault();
});
</script>

最佳答案

问题不是您的JavaScript，而是您的CSS。当#main_nav出现时，它掩盖了图标，因此该图标不再可单击。您单击的是#main_nav，而不是图标。您可以轻松地说出这一点，因为导航栏显示时，您将悬停的手形鼠标指针变成了常规鼠标指针。

在您的CSS中，最有意义的解决方法是删除padding-left上的#main_nav并改用left，因为无论如何您已经将其定位了。

#main_nav {
  display: none;
  position: absolute;
  /*padding-left: 40px;*/
  left: 60px;
  padding-top: 10px;
}

工作片段：

var nav = document.getElementById('access_nav'),
  body = document.body;

nav.addEventListener('click', function(e) {
  body.className = body.className ? '' : 'with_nav';
  e.preventDefault();
});

.menu-button {
  padding-top: 25px;
  padding-left: 30px;
  float: left;
}

.menu-button a {
  color: #000;
}

.menu-button a:hover {
  color: #940002;
}

#main_nav {
  display: none;
  position: absolute;
  /*padding-left: 40px;*/
  left: 60px;
  padding-top: 10px;
}

#main_nav ul {
  list-style-type: none;
}

#main_nav li {
  display: inline;
  margin: 0 10px;
}

#main_nav a {
  text-decoration: none;
  color: #000;
}

.with_nav #main_nav {
  display: block;
}

#main_nav:target {
  display: block;
}

<div class="menu-button">
  <a href="#main_nav" id="access_nav"><img class="fa fa-bars" src="http://placehold.it/25x25"></a>
</div>

<nav id="main_nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

关于javascript - 单击按钮时显示导航栏-之后不会关闭，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45284778/