如何获得与我的其余javascript一起使用的按钮？

Question

I am attempting to make a button that makes drop down menu pop up. 我试图制作一个使下拉菜单弹出的按钮。 I want the user to be able to toggle the pop up menu off by either pressing the button again or by clicking outside of the menu. 我希望用户能够通过再次按下按钮或在菜单外部单击来关闭弹出菜单。 With my current code I can use the button to open the drop down menu, but the button stops working afterwords. 使用我当前的代码，我可以使用按钮打开下拉菜单，但是该按钮停止工作后缀。 Exiting the menu by clicking outside of the menu works just fine. 通过单击菜单外部退出菜单即可。 How can I get my button to stay working after I open the menu 打开菜单后，如何使按钮保持工作状态

Here is my code: 这是我的代码：

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

New code for multiple buttons (for anyone interested in doing multiple buttons): 多个按钮的新代码（适用于对多个按钮感兴趣的任何人）：

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

Answer 1

Cause: When you click the button, both events are fired. 原因：单击该按钮时，两个事件均被触发。

The MouseUp event handler is called first, closing the menu. 首先调用MouseUp事件处理程序，关闭菜单。
The OnClick event handler is called next, detecting that the menu is closed, consequently opening it again. 接下来调用OnClick事件处理程序，检测菜单已关闭，然后再次将其打开。

With today's browsers, this all happens without a glitch; 在当今的浏览器中，这一切都不会发生故障。 seemingly nothing happened. 似乎什么也没发生。

Solution: Add a condition to the MouseUp event handler: 解决方案：将条件添加到MouseUp事件处理程序中：

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

or 要么

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

For the latter approach to work, you need to give the button an ID: 对于后一种方法，您需要给按钮一个ID：

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

如何获得与我的其余javascript一起使用的按钮？

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-01-06 12:14:01

如何获得与我的其余javascript一起使用的按钮？

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-01-06 12:14:01

解决方案1
1 已采纳 2016-01-06 12:14:01