如何讓我的按鈕在單擊任何位置的地方工作？

此刻，我的漢堡包按鈕在轉換之前工作得很好，但是如果您點擊「X」的任何部分，漢堡包按鈕轉換爲紅色「X」按鈕後，按鈕將會轉換，但不會關閉像它應該的菜單。我找不到我弄亂的地方。如何讓我的按鈕在單擊任何位置的地方工作？

這裏的jsfiddle：https://jsfiddle.net/ex3z5o8L/

下面是代碼：

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 

    *{ 
     margin: 0px; 
     padding: 0px; 
     font-family: "Verdana"; 
    } 
    #image { 
     position: relative; 
     z-index: -1 ;  
     height: 100vh; 
     width: 100%; 
    } 
    #content { 
     position: relative; 
     height: 100vh; 
     width: 100%; 
     background-color:#4d5555; 
    } 
    #footer { 
     position: relative; 
     width: 100%; 
     height: 100vh; 
     background-color:#ffffff; 
    } 
    div#header #fullScreenNav{ 
     position:fixed; 
     height:0px; 
     width:100%; 
     background:#000; 
     top:0px; 
     left:0px; 
     overflow:hidden; 
     z-index:2; 
    } 
    #fullScreenNavbtn{ 
     background: #f3f3f3; 
     padding: 10px; 
     position: absolute; 
     z-index: 1 ; 
     top: 70vh; 
     left: 50%; 
     margin-right: -50%; 
     transform: translate(-50%, -50%) 
    } 
/* ---------------------------------------------------------Start Of Hamburger Button------------------------------------------------------- */ 
.c-hamburger { 
    display: block; 
    position: fixed; 
    overflow: hidden; 
    margin: 0; 
    padding: 0; 
    width: 64px; 
    height: 64px; 
    font-size: 0; 
    text-indent: -9999px; 
    appearance: none; 
    box-shadow: none; 
    border-radius: none; 
    border: none; 
    cursor: pointer; 
    transition: background 0.1s; 
    border-radius:10px;  
    background: transparent; 
    right:5px; 
    top:5px; 
    z-index: 3; 
} 
.c-hamburger:focus { 
    outline: none; 
} 

.c-hamburger:hover span, 
.c-hamburger:hover span::before, 
.c-hamburger:hover span::after 
{background: black;} 

.c-hamburger span { 
    display: block; 
    position: absolute; 
    top: 28px; 
    left: 10px; 
    right: 10px; 
    height: 8px; 
    background: #e6e6e6; 
    border-radius:100px; 
} 

.c-hamburger span::before, 
.c-hamburger span::after { 
    position: absolute; 
    display: block; 
    left: 0; 
    width: 100%; 
    height: 8px; 
    background-color: #e6e6e6; 
    content: ""; 
    border-radius:100px;  
} 

.c-hamburger span::before { 
    top: -15px; 
} 

.c-hamburger span::after { 
    bottom: -15px; 
} 

.c-hamburger--htx { 
} 

.c-hamburger--htx span { 
} 

.c-hamburger--htx span::before, 
.c-hamburger--htx span::after { 
    transition-duration: 0.1s, 0.1s; 
    transition-delay: 0.1s, 0s; 
} 

.c-hamburger--htx span::before { 
    transition-property: top, transform; 
} 

.c-hamburger--htx span::after { 
    transition-property: bottom, transform; 
} 

/* active state, i.e. menu open */ 
.c-hamburger--htx.is-active { 
    background-color: #cb0032; 
} 

.c-hamburger--htx.is-active span { 
    background: none; 
} 

.c-hamburger--htx.is-active span::before { 
    top: 0; 
    transform: rotate(45deg); 
    background: white; 
} 

.c-hamburger--htx.is-active span::after { 
    bottom: 0; 
    transform: rotate(-45deg); 
    background: white; 
} 

.c-hamburger--htx.is-active span::before, 
.c-hamburger--htx.is-active span::after { 
    transition-delay: 0s, 0.1s; 
} 
/* ---------------------------------------------------------End of Hamburger Button-------------------------------------------------- */ 
</style> 

</head> 

<body> 


<div id="header"> 
    <div id="headerBtnHolder"> 
    <img onload="parallex1('image')" src="" id="image" /> 
     <button id="fullScreenNavbt" class="c-hamburger c-hamburger--htx" onclick="toggleNavPanel('fullScreenNav','100vh','fullScreenNavbt')"> 
      <span>toggle menu</span> 
     </button> 
    </div> 
    <div id="fullScreenNav"> 
     <div> 
     </div> 
    </div> 
</div> 

<div id="content"></div> 

<div id="footer"></div> 

<script> 
(function() { 

    "use strict"; 

    var toggles = document.querySelectorAll(".c-hamburger"); 

    for (var i = toggles.length - 1; i >= 0; i--) { 
    var toggle = toggles[i]; 
    toggleHandler(toggle); 
    }; 

    function toggleHandler(toggle) { 
    toggle.addEventListener("click", function(e) { 
     e.preventDefault(); 
     (this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active"); 
    }); 
    } 

})(); 
</script> 
<script> 
function toggleNavPanel(dropDivId, height, btnId){ 
    var panel = document.getElementById(dropDivId), maxH= height, nav = btnId; 
    if(panel.style.height == maxH){ 
     panel.style.height = "0px"; 
    } else { 
     panel.style.height = maxH; 
    } 
window.addEventListener('mouseup', function(event){ 
     if(event.target != panel && event.target.parentNode !=panel && event.target.id != nav){ 
      panel.style.height = "0px"; 
     } 
}); 
} 
</script> 
<script type="text/javascript"> 
    function parallex1(ObjectId){ 
    var ypos, image; 
    function parallex() { 
     ypos = window.pageYOffset; 
     image = document.getElementById(ObjectId); 
     image.style.top = ypos * .6 + 'px'; 
    } 
    window.addEventListener('scroll', parallex);} 
</script> 
</body> 
</html>

來源

2016-01-14 INeedHelp

你的小提琴的作品。顯示一個灰色框，當按下菜單按鈕時顯示一個黑色框。如果按下X按鈕，黑匣子消失。 –

張貼的代碼應該是顯示問題的**最小**示例，230行過多。 – RobG

你必須準確地按下X的白色部分，當你這樣做時會混淆。 – INeedHelp

你的基本問題是，在每一次點擊你，所以你重新創建一個事件地獄添加事件監聽。除去onClick並僅添加事件偵聽器一次以運行您的方法。您的切換面板的檢查也是錯誤的。按鈕中還有一個跨度，它也應該切換。

來源

2016-01-14 02:24:29 estherz

我還是很困惑。如果我關閉onclick事件，按鈕應該如何打開全屏面板？ – INeedHelp

啊..我會嘗試編輯你的小提琴 – estherz

https://jsfiddle.net/rainb0w/ex3z5o8L/2/ 讓我知道如果這樣的作品，如果你需要我解釋什麼..順便說一句，我試圖改變只有在你的代碼中必不可少的部分，但它會更好，而不是設置高度來切換一個類'is-open'，它會有高度。另外，添加單獨的腳本內聯標籤也沒有任何好處。 – estherz

如何讓我的按鈕在單擊任何位置的地方工作？

回答

相關問題