我正在尝试制作一个弹出下拉菜单的按钮。我希望用户能够通过再次按下按钮或单击菜单外部来关闭弹出菜单。使用我当前的代码，我可以使用该按钮打开下拉菜单，但该按钮随后停止工作。通过单击菜单外部退出菜单效果很好。打开菜单后如何让我的按钮继续工作
这是我的代码:
<!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">▾</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 ▾</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 ▾</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">▾</span></button>
关于javascript - 我怎样才能让我的按钮与我的其余 javascript 一起工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34632278/