如何讓我的按鈕與我的其餘javascript一起工作？

我正在嘗試製作一個按鈕，使下拉菜單彈出。我希望用戶能夠通過再次按下按鈕或單擊菜單外部來切換彈出菜單。用我目前的代碼，我可以使用按鈕來打開下拉菜單，但是按鈕停止工作。通過單擊菜單外部退出菜單可以很好地工作。我怎樣才能讓我的按鈕留下工作，我打開菜單如何讓我的按鈕與我的其餘javascript一起工作？

這裏後是我的代碼：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body{ margin:0px; background:#999; } 
div#topbar > #sections_panel{ 
    position:absolute; 
    height:0px; 
    width:550px; 
    background:#000; 
    top:60px; 
    left:0px; 
    border-radius:0px 0px 8px 8px; 
    overflow:hidden; 
    z-index:10000; 
} 
div#topbar > #sections_panel > div{ 
    background:#333; 
    padding:20px; 
    height:238px; 
    margin:10px; 
    color:#FC0; 
} 
</style> 
<script> 
function toggleNavPanel(x){ 
    var panel = document.getElementById(x), maxH="300px"; 
    var box = document.getElementById('sections_panel') 

    if(panel.style.height == maxH){ 
     panel.style.height = "0px"; 
    } else { 
     panel.style.height = maxH; 
    } 

window.addEventListener('mouseup', function(event){ 
     if(event.target != box && event.target.parentNode !=box){ 
      panel.style.height = "0px"; 

     } 
}); 
} 


</script> 
</head> 
<body> 
<div id="topbar"> 
    <div id="logo">LOGO</div> 
    <div id="sections_btn_holder"> 
    <button onclick="toggleNavPanel('sections_panel')">Navigator <span id="navarrow">&#9662;</span></button> 
    </div> 
    <div id="sections_panel"> 
    <div> 
     Try adding things like more child div containers, links, buttons, menus, pictures, paragraphs, videos, etc... This area can display way more than just menu buttons or links. You will see a lot of modern sites even adding graphics, icons, animations and images to their drop down menus nowadays. So get creative partner. 
    </div> 
    </div> 
</div> 
</body> 
</html>

的多個按鈕的新代碼（有興趣的人做多個按鈕）：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body{ margin:0px; background:#999; } 
div#topbar > #sections_panel{ 
    position:absolute; 
    height:0px; 
    width:550px; 
    background:#000; 
    top:200px; 
    left:0px; 
    border-radius:0px 0px 8px 8px; 
    overflow:hidden; 
    z-index:10000; 
} 
div#topbar > #sections_panel > div{ 
    background:#333; 
    padding:20px; 
    height:238px; 
    margin:10px; 
    color:#FC0; 
} 

div#topbar1 > #sections_panel1{ 
    position:absolute; 
    height:0px; 
    width:550px; 
    background:#000; 
    top:250px; 
    left:0px; 
    border-radius:0px 0px 8px 8px; 
    overflow:hidden; 
    z-index:10000; 
} 
div#topbar1 > #sections_panel1 > div{ 
    background:#333; 
    padding:20px; 
    height:238px; 
    margin:10px; 
    color:#FC0; 
} 
</style> 
<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> 


</head> 
<body> 
<div id="topbar"> 
    <div id="logo">LOGO</div> 
    <div id="sections_btn_holder"> 
    <button id="nav2" onclick="toggleNavPanel('sections_panel', '300px','nav2')">Navigator &#9662;</button> 
    </div> 
    <div id="sections_panel"> 
    <div> 
     hahahahaha 
    </div> 
    </div> 
</div> 

<div id="topbar1"> 
    <div id="logo1">LOGO</div> 
    <div id="sections_btn_holder1"> 
    <button id="nav1" onclick="toggleNavPanel('sections_panel1', '300px','nav1')">Navigator &#9662;</button> 
    </div> 
    <div id="sections_panel1"> 
    <div> 
     hahahahaha 
    </div> 
    </div> 
</div> 
</body> 
</html>

來源

2016-01-06 INeedHelp

原因： 當您單擊按鈕時，都會觸發事件。

首先調用MouseUp事件處理程序，關閉菜單。
接下來調用OnClick事件處理程序，檢測到菜單已關閉，因此再次打開它。

今天的瀏覽器，這一切都沒有發生故障;似乎什麼也沒有發生。

解決方案： 添加條件MouseUp事件處理程序：

if (event.target != box && event.target.parentNode !=box && event.target.tagName != "BUTTON"){

或

if (event.target != box && event.target.parentNode != box && event.target !== nav){

對於後者的工作方式，你需要給該按鈕的ID：

<button id="nav" onclick="toggleNavPanel('sections_panel')">Navigator <span id="navarrow">&#9662;</span></button>

來源

2016-01-06 12:14:01

謝謝，我會upvote你顯示我的應用程序但他們不算數，所以這裏是一張開心的臉：D。很有幫助！ – INeedHelp

如果答案解決了您的問題，請[接受]（http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work）答案。如果它不能解決你的問題，那麼請讓我知道，所以我可以在這方面努力。 –

哦，我不知道我可以「接受」一個答案。是的，它確實解決了我的問題，再次感謝！ – INeedHelp

如何讓我的按鈕與我的其餘javascript一起工作？

回答

相關問題