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

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

javascript html css

如何让我的按钮与我的javascript的其余部分一起工作？,javascript,html,css,Javascript,Html,Css,我试图使一个按钮，使下拉菜单弹出。我希望用户能够通过再次按下按钮或单击菜单外部来关闭弹出菜单。根据我当前的代码，我可以使用该按钮打开下拉菜单，但该按钮在之后停止工作。通过在菜单外单击退出菜单可以正常工作。打开菜单后，如何使按钮保持工作状态这是我的密码： <!DOCTYPE html> <html> <head> <style> body{ margin:0px; background:#999; } div#topbar > #sectio

我试图使一个按钮，使下拉菜单弹出。我希望用户能够通过再次按下按钮或单击菜单外部来关闭弹出菜单。根据我当前的代码，我可以使用该按钮打开下拉菜单，但该按钮在之后停止工作。通过在菜单外单击退出菜单可以正常工作。打开菜单后，如何使按钮保持工作状态

这是我的密码：

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


正文{边距：0px；背景：#999；}
分区#顶栏>#分区#面板{
位置：绝对位置；
高度：0px；
宽度：550px；
背景：#000；
顶部：60px；
左：0px；
边界半径：0px 0px 8px 8px；
溢出：隐藏；
z指数：10000；
}
分区#顶栏>#分区#面板>分区{
背景：#333；
填充：20px；
高度：238px；
利润率：10px；
颜色：#FC0；
}
功能面板（x）{
var panel=document.getElementById（x），maxH=“300px”；
var box=document.getElementById（'sections\u panel'））
如果（panel.style.height==maxH）{
panel.style.height=“0px”；
}否则{
panel.style.height=最大值；
}
window.addEventListener（'mouseup'，函数（事件）{
if（event.target！=box&&event.target.parentNode！=box）{
panel.style.height=“0px”；
}
});
}
标志
导航器▾；
尝试添加更多的子div容器、链接、按钮、菜单、图片、段落、视频等。。。该区域可以显示的方式不仅仅是菜单按钮或链接。现在，你会看到很多现代网站甚至在下拉菜单中添加了图形、图标、动画和图像。所以找个有创意的搭档。

多个按钮的新代码（适用于对多个按钮感兴趣的人）：


正文{边距：0px；背景：#999；}
分区#顶栏>#分区#面板{
位置：绝对位置；
高度：0px；
宽度：550px；
背景：#000；
顶部：200px；
左：0px；
边界半径：0px 0px 8px 8px；
溢出：隐藏；
z指数：10000；
}
分区#顶栏>#分区#面板>分区{
背景：#333；
填充：20px；
高度：238px；
利润率：10px；
颜色：#FC0；
}
分区topbar1>分区面板1{
位置：绝对位置；
高度：0px；
宽度：550px；
背景：#000；
顶部：250px；
左：0px；
边界半径：0px 0px 8px 8px；
溢出：隐藏；
z指数：10000；
}
分区#topbar1>分区#面板1>分区{
背景：#333；
填充：20px；
高度：238px；
利润率：10px；
颜色：#FC0；
}
功能面板（dropDivId、高度、btnId）{
var panel=document.getElementById（dropDivId），maxH=height，nav=btnId；
如果（panel.style.height==maxH）{
panel.style.height=“0px”；
}否则{
panel.style.height=最大值；
}
window.addEventListener（'mouseup'，函数（事件）{
if（event.target！=面板和&event.target.parentNode！=面板和&event.target.id！=导航）{
panel.style.height=“0px”；
}
});
}
标志
导航器▾；
哈哈哈哈
标志
导航器▾；
哈哈哈哈

原因： 单击该按钮时，将触发两个事件

首先调用MouseUp事件处理程序，关闭菜单
接下来调用OnClick事件处理程序，检测菜单是否已关闭，从而再次打开它

在今天的浏览器中，这一切都不会出现故障；似乎什么也没发生

解决方案： 向MouseUp事件处理程序添加条件：

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

或

对于后一种方法，您需要为按钮提供一个ID：

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

Navigator▾；

谢谢你，我会投票给你表示我的感谢，但它们还不算，所以这里有一张快乐的脸：D.非常有用！如果答案解决了你的问题，那么请回答。如果它不能解决你的问题，那么请让我知道，这样我就可以解决这个问题。哦，我不知道我可以“接受”一个答案。是的，它解决了我的问题，再次感谢！嘿，Ruud，按钮部分修复了我的单个按钮的代码，但是现在我添加了另一个按钮，出现了一个新问题。我可以点击我的第一个按钮，菜单打开，但当我点击第二个按钮时，第一个菜单没有关闭，所以我有两个菜单打开。我想这可能是因为它无法区分这两个按钮，所以我在这两个按钮上都加了一个id，并按照你建议的第二种方式进行了操作，但这让我回到了最初的问题。我要重新编辑帖子，这样你就可以看到我的新代码了。

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

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