Question

我在这个系统中遇到的问题是，我似乎无法让下拉按钮相互配合。我只想要点击另一个按钮时单击的第一个按钮关闭。到目前为止，他们只是相互堆叠，除非再次点击或在下拉区域外单击。

这是我的代码：

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

Answer 1

我猜你的意思是：注意：特别要注意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>

希望这有帮助

Answer 2

假设您总是有一个按钮，并且按钮旁边有一个不同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>

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

2 个答案: