Question

所以我在我的网站上设置了一个新的导航，现在它被隐藏为一个图标，并在点击它时显示。再次点击后，假设再次隐藏菜单，但事实并非如此。

菜单关闭示例：

已打开的菜单示例：

单击三个栏图标会打开您在第二个示例中看到的四个菜单按钮，但是当我尝试单击按钮关闭菜单时，它什么也没做......即使它也是假设。任何有关修复此问题的帮助将不胜感激。

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>

Answer 1

问题不在于您的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;
}

工作片段：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

body.className？＆＃39;＆＃39; ：＆＃39; with_nav＆＃39 ;; 也许创建一个类而不是将它设置为没有类。我不确定这是否会清除其css属性....

按钮上显示导航栏单击 - 之后不关闭

2 个答案: