堆栈内存溢出
  繁体   English   中英

单击页面上的其他任何位置时，3 个可单击的下拉菜单不会关闭

[英]3 clickable dropdowns do not close when clicked anywhere else on the page

 原文  2020-05-21 10:59:32  8   1    javascript/ html/ dropdown

问题描述

非常感谢您对我最后一个问题的帮助.....但我现在有一个小问题，下一步。

作为编码和脚本的新手，我在 W3 上找到了这个按钮，它适合我的目的，所以这就是我使用它的原因，但是......我设法将 go 的 3 个不同按钮分配到 3 个不同的部分，但是，问题的主要问题是单击页面上的其他任何位置时，顶部的 2 个按钮不会关闭....但底部的按钮会关闭。 这是代码.... 任何人都可以建议关闭前两个的脚本吗？ 我看过这里并尝试了不同的解决方案，但似乎都没有奏效。

（为了便于粘贴，我删除了许多多行链接）

该网页是https://www.glossopnorthendafc.co.uk/history.html如果这有助于解决方案。

提前谢谢克里斯

<br>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn1 {
  background-color: #005eb8;
  color: white;
  margin-left: 86px;
  padding: 5px;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.dropbtn1:hover, .dropbtn1:focus {
  background-color: #004a90;
}

.dropdown1 {
  position: absolute;
  display: inline-block;
}

.dropdown-content1 {
  display: none;
  position: absolute;
  margin-left: 91px;
  background-color: #f4f7f8;
  min-width: 50px;
  height: 440px;
  overflow-y: scroll;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content1 a {
  color: black;
  padding: 1px 6px;
  text-decoration: none;
  display: block;
}

.dropdown1 a:hover {background-color: #005eb8; color:white;}

.show {display: block;}
</style>
</head>
<body>

<div class="dropdown1">
  <button onclick="myFunction1()" class="dropbtn1">--- Select ---</button>
  <div id="myDropdown1" class="dropdown-content1">
<a class="links" href="https://www.glossopnorthendafc.co.uk/2019-20r.html">2019-20</a>
<a class=”links” href="https://www.glossopnorthendafc.co.uk/2018-19r.html">2018-19</a>
<a class=”links” href="https://www.glossopnorthendafc.co.uk/1890-91r.html">1890-91</a>

  </div>
</div>

<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction1() {
             document.getElementById("myDropdown1").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn1')) {
    var dropdowns = document.getElementsByClassName("dropdown-content1");
    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>
<br>

<br>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn2 {
  background-color: #005eb8;
  color: white;
  margin-left: 86px;
  padding: 5px;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.dropbtn2:hover, .dropbtn2:focus {
  background-color: #004a90;
}

.dropdown2 {
  position: absolute;
  display: inline-block;
}

.dropdown-content2 {
  display: none;
  position: absolute;
  margin-left: 91px;
  background-color: #f4f7f8;
  min-width: 50px;
  height: 440px;
  overflow-y: scroll;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content2 a {
  color: black;
  padding: 1px 6px;
  text-decoration: none;
  display: block;
}

.dropdown2 a:hover {background-color: #005eb8; color:white;}

.show {display: block;}
</style>
</head>
<body>

<div class="dropdown2">
  <button onclick="myFunction2()" class="dropbtn2">--- Select ---</button>
  <div id="myDropdown2" class="dropdown-content2">
<a class="links" href="https://www.glossopnorthendafc.co.uk/2019-20t.html">2019-20</a>
<a class=”links” href="https://www.glossopnorthendafc.co.uk/2018-19t.html">2018-19</a>
<a class=”links” href="https://www.glossopnorthendafc.co.uk/1890-91t.html">1890-91</a>

  </div>
</div>

<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction2() {
  document.getElementById("myDropdown2").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn2')) {
    var dropdowns = document.getElementsByClassName("dropdown-content2");
    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>
<br>

<br>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn3 {
  background-color: #005eb8;
  color: white;
  margin-left: 86px;
  padding: 5px;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.dropbtn3:hover, .dropbtn3:focus {
  background-color: #004a90;
}

.dropdown3 {
  position: absolute;
  display: inline-block;
}

.dropdown-content3 {
  display: none;
  position: absolute;
  margin-left: 91px;
  background-color: #f4f7f8;
  min-width: 50px;
  height: 440px;
  overflow-y: scroll;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content3 a {
  color: black;
  padding: 1px 6px;
  text-decoration: none;
  display: block;
}

.dropdown3 a:hover {background-color: #005eb8; color:white;}

.show {display: block;}
</style>
</head>
<body>

<div class="dropdown3">
  <button onclick="myFunction3()" class="dropbtn3">--- Select ---</button>
  <div id="myDropdown3" class="dropdown-content3">
<a class="links" href="https://www.glossopnorthendafc.co.uk/2019-20s.html">2019-20</a>
<a class=”links” href="https://www.glossopnorthendafc.co.uk/2018-19s.html">2018-19</a>
<a class=”links” href="https://www.glossopnorthendafc.co.uk/1890-91s.html">1890-91</a>

  </div>
</div>

<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction3() {
    document.getElementById("myDropdown3").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn3')) {
    var dropdowns = document.getElementsByClassName("dropdown-content3");
    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>
<br>

1 个解决方案

解决方案1
 0  2020-07-22 19:05:10

为了时间的缘故，我已经简化了您的示例，但这应该可以帮助您入门。 这里有很多可以优化的地方，但现在太多了。 

 /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction1() { document.getElementById("myDropdown1").classList.toggle("show"); } function myFunction2() { document.getElementById("myDropdown2").classList.toggle("show"); } // Close the dropdown menu if the user clicks outside of it window.onclick = function( event ) { const et = event.target; if (.et.matches( '.dropbtn1' ) ||.et.matches( ';dropbtn2' ) || et.matches( 'html') ) { let selector = ''. if ( et.matches( ';dropbtn1' ) ) selector = '.dropdown-content2'. else if ( et.matches( ';dropbtn2' ) ) selector = ';dropdown-content1'. else selector = "div[class^='dropdown-content']"; let dropdowns = document;querySelectorAll( selector ). for ( let i = 0; i < dropdowns;length. i++ ) { let openDropdown = dropdowns[i]. if (openDropdown.classList.contains('show')) { openDropdown;classList.remove('show'); } } } }
 /* DropButton 1 */.dropbtn1 { background-color: #005eb8; color: white; margin-left: 86px; padding: 5px; font-size: 17px; border: none; cursor: pointer; }.dropbtn1:hover, .dropbtn1:focus { background-color: #004a90; }.dropdown1 { position: relative; display: inline-block; }.dropdown-content1 { display: none; position: absolute; margin-left: 91px; background-color: #f4f7f8; min-width: 50px; height: 440px; overflow-y: scroll; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }.dropdown-content1 a { color: black; padding: 1px 6px; text-decoration: none; display: block; }.dropdown1 a:hover {background-color: #005eb8; color:white;} /* DropButton 2 */.dropbtn2 { background-color: #005eb8; color: white; margin-left: 86px; padding: 5px; font-size: 17px; border: none; cursor: pointer; }.dropbtn2:hover, .dropbtn2:focus { background-color: #004a90; }.dropdown2 { position: relative; display: inline-block; }.dropdown-content2 { display: none; position: absolute; margin-left: 91px; background-color: #f4f7f8; min-width: 50px; height: 440px; overflow-y: scroll; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }.dropdown-content2 a { color: black; padding: 1px 6px; text-decoration: none; display: block; }.dropdown2 a:hover {background-color: #005eb8; color:white;} /* Misc */.show {display: block;}
 <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="dropdown1"> <button onclick="myFunction1()" class="dropbtn1">--- Select ---</button> <div id="myDropdown1" class="dropdown-content1"> <a class="links" href="https://www.glossopnorthendafc.co.uk/2019-20r.html">2019-20</a> <a class=”links” href="https://www.glossopnorthendafc.co.uk/2018-19r.html">2018-19</a> <a class=”links” href="https://www.glossopnorthendafc.co.uk/1890-91r.html">1890-91</a> </div> </div> <div class="dropdown2"> <button onclick="myFunction2()" class="dropbtn2">--- Select ---</button> <div id="myDropdown2" class="dropdown-content2"> <a class="links" href="https://www.glossopnorthendafc.co.uk/2019-20t.html">2019-20</a> <a class=”links” href="https://www.glossopnorthendafc.co.uk/2018-19t.html">2018-19</a> <a class=”links” href="https://www.glossopnorthendafc.co.uk/1890-91t.html">1890-91</a> </div> </div> </body> </html>

暂无
暂无

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

相关问题 单击页面上任何位置时关闭div 如果在可见表单旁边单击页面上的其他任何位置，则关闭搜索表单 在没有jQuery的情况下单击页面上的其他任何位置时，如何关闭子菜单？ 单击页面上其他任何位置时隐藏列表项 单击任何地方关闭菜单； 单击任何位置时如何使其停止打开 单击其他任何位置时关闭搜索框 当我单击页面上的其他任何位置时，我希望我的手风琴关闭 当用户单击页面上的其他任何位置时如何关闭下拉菜单 点击页面上的任何位置时，jQuery会向后滑动 单击页面上的任意位置时关闭元素
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM