在按鈕上顯示導航欄點擊 - 之後不會關閉

因此，我在我的網站上設置了一個新的導航欄，以便它現在隱藏爲圖標，並在點擊時顯示。一旦再次點擊，它是假設再次隱藏菜單，但它不。在按鈕上顯示導航欄點擊 - 之後不會關閉

菜單關閉的例子：

打開的菜單

例子：

點擊三條槓圖標，打開您在看到四個菜單按鈕第二個例子，但是當我嘗試點擊按鈕關閉菜單時，它沒有興......即使它也是這樣。任何幫助解決這個問題將不勝感激。

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>

來源

2017-07-24 Lag

這個問題不是你的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>

來源

2017-07-24 15:58:18 cjl750

工作一種享受！感謝幫助！ – Lag

body.className？ ''：'with_nav'; 可能會創建一個類，而不是將其設置爲無類。即時通訊不知道這是否清除其CSS屬性....

來源

2017-07-24 15:45:51

在按鈕上顯示導航欄點擊 - 之後不會關閉

回答

相關問題