用户单击其他位置时,如何隐藏导航栏的下拉菜单? [英] How do I hide the dropdown of a navbar when a user clicks elsewhere?

查看:50
本文介绍了用户单击其他位置时,如何隐藏导航栏的下拉菜单?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用导航栏和下拉菜单构建一个新网站,并希望当我单击该站点的另一个按钮或其他部分时,该下拉菜单消失.我该如何编码?

I'm building a new website with a navbar with a dropdown menu and want to have the dropdown disappear when I click on another button or other part of the site. How do I code that?

下面的代码是我尝试使此功能正常运行的最新实验.当它是一个按钮时,它工作正常,但是我无法将其缩放到多个按钮.我对此很陌生,正在尝试学习.

The code below is my latest experiment in trying to get this to work. It worked fine when it was one button, but I've been unable to scale it to multiple buttons. I'm very new to this and trying to learn.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  cursor: pointer;
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
  background-color: red;
}

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

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

.dropdown-content a:hover {
  background-color: #ddd;
}

.show {
  display: block;
}

.wrapper {
  min-width: 800px;
  margin: auto;
}
</style>
</head>
<body>

<div class="wrapper">
<div class="navbar">

  <a href="#home">Company name</a>

  <div class="dropdown">
  <button class="dropbtn" onclick="myFunction(1)">Our Methods
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content" id="myDropdown1">
    <a href="#link">Insurance</a>
    <a href="#link">Divorce</a>
    <a href="#link">Financial Planning</a>
    <a href="#link">Mortgage</a>
    <a href="#link">Stocks</a>
    <a href="#link">Pension</a>
  </div>
  </div>

  <div class="dropdown">
  <button class="dropbtn" onclick="myFunction(2)">Who we are
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content" id="myDropdown2">
    <a href="#link">About the Team</a>
    <a href="#link">Awards</a>
    <a href="#link">Interesting articles</a>
  </div>
  </div>

  <div class="dropdown">
  <button class="dropbtn" onclick="myFunction(3)">Business info
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content" id="myDropdown3">
    <a href="#link">Prices</a>
    <a href="#link">Privacy</a>
    <a href="#link">Methods</a>
  </div>
  </div> 

  <a href="#home">Recommendations</a>

  <div class="dropdown">
  <button class="dropbtn" onclick="myFunction(4)">Advice Evenings
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content" id="myDropdown4">
    <a href="#link">Succesful Pensions</a>
    <a href="#link">Casestudie Pension</a>
    <a href="#link">Business Contacts</a>
  </div>
  </div> 
</div>
</div>

<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction(num) {

  document.getElementById("myDropdown" + num).classList.toggle("show");
}



// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {
  var myDropdown1 = document.getElementById("myDropdown1");
    if (myDropdown1.classList.contains('show')) {
      myDropdown1.classList.remove('show');
    }
  var myDropdown2 = document.getElementById("myDropdown2");
    if (myDropdown2.classList.contains('show')) {
      myDropdown2.classList.remove('show');
    } 
  var myDropdown3 = document.getElementById("myDropdown3");
    if (myDropdown3.classList.contains('show')) {
      myDropdown3.classList.remove('show');
    } 
  var myDropdown4 = document.getElementById("myDropdown4");
    if (myDropdown4.classList.contains('show')) {
      myDropdown4.classList.remove('show');
    } 
  }
}

</script>
</body>
</html>

我希望当我在其他位置单击时所有按钮都被隐藏,但是这并没有发生.(您可以在此处查看运行中的代码: http://growtricks.com/dropdown/dropdown4.html ).

I expected all buttons to be hidden when I click elsewhere, but somehow that isn't happening. (you can see the code in action here: http://growtricks.com/dropdown/dropdown4.html ).

我尝试在MyFunction的开头添加以下行:

I've tried including this line at the beginning of MyFunction:

document.getElementsByClassName('dropdown-content').forEach(function(dropdown) { dropdown.classList.remove('show'); });

但是,显示下拉列表内容就完全停止了.

But that just completely stops ever showing the dropdown-content.

  1. 当我单击其他位置时,如何使下拉菜单内容消失?
  2. 当我单击另一个内容时,如何使下拉菜单内容消失?
  3. 这是一个额外的问题,并且不是必需的:如何清理窗口.最后单击以不重复n次相同代码的方式?

推荐答案

有多种方法.我喜欢有一个单独的函数变量来清除先前的操作:

There are multiple ways. I kind a like to have separate function variable for clearing previous action:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  cursor: pointer;
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
  background-color: red;
}

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

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

.dropdown-content a:hover {
  background-color: #ddd;
}

.show {
  display: block;
}

.wrapper {
  min-width: 800px;
  margin: auto;
}
</style>
</head>
<body>

<div class="wrapper">
<div class="navbar">

  <a href="#home" onclick="myFunction('home')">Company name</a>

  <div class="dropdown">
  <button class="dropbtn" onclick="myFunction(1)">Our Methods
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content" id="myDropdown1">
    <a href="#link">Insurance</a>
    <a href="#link">Divorce</a>
    <a href="#link">Financial Planning</a>
    <a href="#link">Mortgage</a>
    <a href="#link">Stocks</a>
    <a href="#link">Pension</a>
  </div>
  </div>

  <div class="dropdown">
  <button class="dropbtn" onclick="myFunction(2)">Who we are
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content" id="myDropdown2">
    <a href="#link">About the Team</a>
    <a href="#link">Awards</a>
    <a href="#link">Interesting articles</a>
  </div>
  </div>

  <div class="dropdown">
  <button class="dropbtn" onclick="myFunction(3)">Business info
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content" id="myDropdown3">
    <a href="#link">Prices</a>
    <a href="#link">Privacy</a>
    <a href="#link">Methods</a>
  </div>
  </div> 

  <a href="#home" onclick="myFunction('home')">Recommendations</a>

  <div class="dropdown">
  <button class="dropbtn" onclick="myFunction(4)">Advice Evenings
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content" id="myDropdown4">
    <a href="#link">Succesful Pensions</a>
    <a href="#link">Casestudie Pension</a>
    <a href="#link">Business Contacts</a>
  </div>
  </div> 
</div>
</div>

<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
let closeDropdown = function() {

}
function myFunction(num) {
  closeDropdown();
  let el = document.getElementById("myDropdown" + num);  
  if (el) {
    el.classList.toggle("show");
    closeDropdown = function() {
        el.classList.remove("show");
    }
  } else {
    closeDropdown = function() {
    } 
  }
}



</script>
</body>
</html>

这篇关于用户单击其他位置时,如何隐藏导航栏的下拉菜单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆