Javascript 在按钮点击时显示导航栏-不'；以后不要关门

因此，我在我的网站上设置了一个新的导航，这样它现在就以图标的形式隐藏起来，并在单击时显示出来。一旦再次单击，它应该再次隐藏菜单，但是，它不会

菜单关闭示例：

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

/* ------------------------------------------------------------------- */
/* 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
================================================== -->
<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>

打开的菜单示例：

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

/* ------------------------------------------------------------------- */
/* 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
================================================== -->
<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>

单击三个栏图标会打开第二个示例中的四个菜单按钮，但是当我尝试单击按钮关闭菜单时，它不会执行任何操作。。。即使它也被认为是。如果您能帮助解决此问题，我们将不胜感激

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>

/* ------------------------------------------------------------------- */
/* 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
================================================== -->
<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:

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

/* ------------------------------------------------------------------- */
/* 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
================================================== -->
<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>

var nav=document.getElementById（'access_nav'），
body=document.body；
导航添加列表器（'click'，函数（e）{
body.className=body.className？“”：“带导航”；
e、 预防默认值（）；
}); 

body.className？''：'带“导航”；

---

可以创建一个类，而不是将其设置为“无类”。我不确定这是否清除了它的css属性

问题不在于JavaScript，而在于CSS。当显示

#main_nav

时，它会覆盖图标，因此图标不再可单击。您正在单击的是

#main_nav

，而不是图标。你可以很容易地看出这一点，因为当导航出现时，你的手上鼠标指针会变成一个普通的鼠标指针

在CSS中，最有意义的修复方法是删除

#main_nav

上的

左填充

，并使用

左

，因为您已经完全定位了它

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

工作代码段：

var nav=document.getElementById（'access\u nav'），
body=document.body；
导航添加列表器（'click'，函数（e）{
body.className=body.className？“”：“带导航”；
e、 预防默认值（）；
});
。菜单按钮{
填充顶部：25px；
左侧填充：30px；
浮动：左；
}
.菜单按钮a{
颜色：#000；
}
.菜单按钮a：悬停{
颜色：#940002；
}
#主导航{
显示：无；
位置：绝对位置；
/*左侧填充：40px*/
左：60px；
填充顶部：10px；
}
#主导航{
列表样式类型：无；
}
#主导航李{
显示：内联；
利润率：0.10px；
}
#主导航a{
文字装饰：无；
颜色：#000；
}
.带导航#主导航{
显示：块；
}
#主导航：目标{
显示：块；
}







工作很愉快！谢谢你的帮助！