stackoom
  简体   繁体   中英

How to Properly Handle Multiple Drop Down Buttons

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

Question

my problem with this system that I'm doing is that I can't seem to make the drop down buttons cooperate with each other. I just want the first button that was clicked to close when another button is clicked. So far they just stack with each other unless clicked again or clicked outside the drop down area.

Here's my code : 

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

solution1
 1  2016-01-24 14:25:57

I'm guessing you mean this: NB: Especially note the commentary in the JS and the way the function is called in the onclick events in html. Namely, myFunction(drpid) .

JAVASCRIPT, CSS AND 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>

Hope this helped

solution2
 1 ACCPTED  2016-01-24 14:32:19

Assuming that you will have always a button and a dropdown with a different id next to the button. I think this would be a solution, and also it avoid redundancy in the 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Drop Down Menu- How to link multiple buttons to javascript function How to trigger the same drop-down/popover with multiple buttons? How to handle multiple on change events on drop-down selection in vuejs HTML Multiple Drop Down Box Not Linking Properly How to make drop down menus open properly? Drop down menu Validation multiple buttons W/ Alert Validation for radio buttons and drop down How to listen for clicks on buttons in a Bootstrap drop down menu? -Javascript How to display data with radio buttons based on drop down selection? How to set default option for dynamic drop down buttons in jQuery?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM