如何让我的按钮与我的javascript的其余部分一起工作

How can I get my button to work with the rest of my javascript?

本文关键字：我的 余部 一起 工作 javascript 按钮      更新时间：2023-09-26

我正在尝试制作一个按钮，使下拉菜单弹出。我希望用户能够通过再次按下按钮或单击菜单外部来关闭弹出菜单。使用我当前的代码，我可以使用按钮打开下拉菜单，但按钮在词后停止工作。通过在菜单外部单击退出菜单也可以。打开菜单后，如何让我的按钮继续工作

这是我的代码：

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

原因：单击按钮时，两个事件都会被触发。

  • 首先调用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>
相关文章：