如何让我的按钮与我的其余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一起工作？

回答

相关问题