堆栈内存溢出
  繁体   English   中英

如何正确处理多个下拉按钮

[英]How to Properly Handle Multiple Drop Down Buttons

 原文  2016-01-24 13:30:22  7   2    javascript/ html/ css

问题描述

我在使用此系统时遇到的问题是，我似乎无法使下拉按钮相互配合。 我只希望单击另一个按钮后关闭的第一个按钮。 到目前为止，它们只是彼此堆叠，除非再次单击或在下拉区域之外单击。

这是我的代码： 

<html>
<style>
.dropbtn {
    background-color: #00BFFF;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #1E90FF;
}

.dropdown2 {
    position: relative;
    display: block;
}


.dropdown-content2 {
    display: none;
    position: absolute;
    background-color: #1E90FF;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content2 a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;

}

.dropdown2 a:hover {
background-color:  #00BFFF;

}

.dropdown {
    position: relative;
    display: block;
}


.dropdown-content {
    display: none;
    position: absolute;
    background-color: #1E90FF;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;

}

.dropdown a:hover {
background-color:  #00BFFF;

}

.show {
display:block;
position: relative;
left:18.6%;
top:-20%;
width: 80%;
}

.border2 {
float: left;
border: 2px #FA5858;
background-color: #FFFFFF;
margin: 0 auto;
padding-bottom:40px;
padding-top:5px;
width : 86%;
height : 44%;
top : -10%;
left : 7%;
position : relative;
padding: 1em;
}
</style>


<body>
<div class = "border2">
<div style = "font-size:25px;list-style-type: none;margin: 0;padding: 10px;overflow: hidden;background-color: #BDBDBD;
position : relative;top : -10%;width : 101.2%;left:-1.5%;"><strong>NEED HELP?</strong></div>

<div class="dropdown">

<button onclick="myFunction()" class="dropbtn" style = "position:absolute; left:-1.5%; width:20%;">GUIDES</button>
  <div id="myDropdown" class="dropdown-content">
  <ul>
    <li><a>asasd.</a></li>
    <li><a>Thasdat.</a></li>
    <li><a>test2.</a></li>
  </ul>
  </div>



<br><br><br><br>
<button onclick="myFunction2()" class="dropbtn" style = "position:absolute; left:-1.5%; width:20%;">SUPPORT</button>
  <div id="myDropdown2" class="dropdown-content2">
  <ul>
    <li><a>test.</a></li>
    <li><a>test.</a></li>

  </ul>
  </div>
</div>


</div>
<script>

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

function myFunction2() {
    document.getElementById("myDropdown2").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) 
  {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) 
    {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) 
      {
        openDropdown.classList.remove('show');
      }
    }
  }
}

</script>


</body>
</html>

2 个解决方案

解决方案1
 1  2016-01-24 14:25:57

我猜你的意思是：注意：特别要注意JS中的注释以及html中onclick事件中调用函数的方式。 即， myFunction(drpid) 。

JAVASCRIPT，CSS和HTML： 

 function myFunction(drpid) { //THIS WAY YOU ONLY NEED ONE FUNCTION document.getElementById(drpid).classList.toggle("show"); //SAME TOGGLE if (drpid=='myDropdown'){ //IF THE BUTTON CLICKED IS 'GUIDES' document.getElementById("myDropdown2").classList.remove("show") } else{ //IF THE BUTTON CLICKED ISN'T 'GUIDES' document.getElementById("myDropdown").classList.remove("show") } } window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { document.getElementById("myDropdown2").classList.remove("show") document.getElementById("myDropdown").classList.remove("show") } } 
 .dropbtn { background-color: #00BFFF; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: #1E90FF; } .dropdown2 { position: relative; display: block; } .dropdown-content2 { display: none; position: absolute; background-color: #1E90FF; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content2 a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown2 a:hover { background-color: #00BFFF; } .dropdown { position: relative; display: block; } .dropdown-content { display: none; position: absolute; background-color: #1E90FF; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown a:hover { background-color: #00BFFF; } .show { display:block; position: relative; left:18.6%; top:-20%; width: 80%; } .border2 { float: left; border: 2px #FA5858; background-color: #FFFFFF; margin: 0 auto; padding-bottom:40px; padding-top:5px; width : 86%; height : 44%; top : -10%; left : 7%; position : relative; padding: 1em; } 
 <div class = "border2"> <div style = "font-size:25px;list-style-type: none;margin: 0;padding: 10px;overflow: hidden;background-color: #BDBDBD; position : relative;top : -10%;width : 101.2%;left:-1.5%;"><strong>NEED HELP?</strong></div> <div class="dropdown"> <button onclick="myFunction('myDropdown')" class="dropbtn" style = "position:absolute; left:-1.5%; width:20%;">GUIDES</button> <div id="myDropdown" class="dropdown-content"> <ul> <li><a>asasd.</a></li> <li><a>Thasdat.</a></li> <li><a>test2.</a></li> </ul> </div> <br><br><br><br> <button onclick="myFunction('myDropdown2')" class="dropbtn" style = "position:absolute; left:-1.5%; width:20%;">SUPPORT</button> <div id="myDropdown2" class="dropdown-content2"> <ul> <li><a>test.</a></li> <li><a>test.</a></li> </ul> </div> </div> </div>

希望这有所帮助

解决方案2
 1 已采纳  2016-01-24 14:32:19

假设您将始终有一个按钮，并且该按钮旁边有一个具有不同ID的下拉菜单。 我认为这将是一个解决方案，并且还能避免CSS中的冗余。 

 function hideDropdown(exceptId){ var dropdowns = document.getElementsByClassName("dropdown-content"); for (var i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show') && openDropdown.id !== exceptId) { openDropdown.classList.remove('show'); } } } window.onclick = function(event) { if (!event.target.classList.contains('dropbtn')) { hideDropdown(null); }else{ var dropdown = event.target.nextElementSibling; dropdown.classList.toggle("show"); hideDropdown(dropdown.id); } } 
 .dropbtn { background-color: #00BFFF; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: #1E90FF; } .dropdown2 { position: relative; display: block; } .dropdown { position: relative; display: block; } .dropdown-content { display: none; position: absolute; background-color: #1E90FF; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown a:hover { background-color: #00BFFF; } .show { display:block; position: relative; left:18.6%; top:-20%; width: 80%; } .border2 { float: left; border: 2px #FA5858; background-color: #FFFFFF; margin: 0 auto; padding-bottom:40px; padding-top:5px; width : 86%; height : 44%; top : -10%; left : 7%; position : relative; padding: 1em; } 
 <div class = "border2"> <div style = "font-size:25px;list-style-type: none;margin: 0;padding: 10px;overflow: hidden;background-color: #BDBDBD; position : relative;top : -10%;width : 101.2%;left:-1.5%;"><strong>NEED HELP?</strong></div> <div class="dropdown"> <button class="dropbtn" style = "position:absolute; left:-1.5%; width:20%;">GUIDES</button> <div id="myDropdown" class="dropdown-content"> <ul> <li><a>asasd.</a></li> <li><a>Thasdat.</a></li> <li><a>test2.</a></li> </ul> </div> <br><br><br><br> <button class="dropbtn" style = "position:absolute; left:-1.5%; width:20%;">SUPPORT</button> <div id="myDropdown2" class="dropdown-content"> <ul> <li><a>test.</a></li> <li><a>test.</a></li> </ul> </div> </div> </div>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 下拉菜单-如何将多个按钮链接到javascript功能 如何使用多个按钮触发相同的下拉/弹出窗口？ 如何在vue.js中的下拉选择上处理多个on change事件 HTML Multiple下拉框未正确链接 如何使下拉菜单正确打开？ 下拉菜单验证多个按钮，带警报 验证单选按钮和下拉菜单 如何监听 Bootstrap 下拉菜单中按钮的点击？ -Javascript 如何基于下拉选择通过单选按钮显示数据？ 如何在jQuery中为动态下拉按钮设置默认选项？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM