Fatal编程技术网
  • javascript/
  • Javascript 当用户单击其他位置时，如何隐藏导航栏的下拉列表？

Javascript 当用户单击其他位置时，如何隐藏导航栏的下拉列表？

javascript html css

Javascript 当用户单击其他位置时，如何隐藏导航栏的下拉列表？,javascript,html,css,Javascript,Html,Css,我正在建立一个新的网站，有一个带有下拉菜单的导航栏，当我点击另一个按钮或网站的其他部分时，我想让下拉菜单消失。我该如何编写代码 下面的代码是我最新的尝试，试图让它工作。当它只有一个按钮时，它工作得很好，但我无法将它扩展到多个按钮。我对这个很陌生，正在努力学习 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"&g

我正在建立一个新的网站，有一个带有下拉菜单的导航栏，当我点击另一个按钮或网站的其他部分时，我想让下拉菜单消失。我该如何编写代码

下面的代码是我最新的尝试，试图让它工作。当它只有一个按钮时，它工作得很好，但我无法将它扩展到多个按钮。我对这个很陌生，正在努力学习

<!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>
但这完全停止了显示下拉内容

  • 当我单击其他位置时，如何使下拉内容消失
  • 当我单击另一个下拉列表时，如何使下拉列表内容消失
  • 这是一个额外的问题，但不是必需的：如何清理窗口。在末尾单击，使同一代码不再重复n次
    • 有多种方法。我有点喜欢使用单独的函数变量来清除以前的操作：

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

    
navbar先生{
溢出：隐藏；
背景色：#333；
字体系列：Arial、Helvetica、无衬线字体；
}
纳瓦尔先生{
浮动：左；
字体大小：16px；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
.下拉列表{
浮动：左；
溢出：隐藏；
}
.下拉菜单{
光标：指针；
字体大小：16px；
边界：无；
大纲：无；
颜色：白色；
填充：14px 16px；
背景色：继承；
字体家族：继承；
保证金：0；
}
.navbar a:悬停，.dropdown:悬停.dropbtn，.dropbtn:焦点{
背景色：红色；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
浮动：无；
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.下拉列表内容a：悬停{
背景色：#ddd；
}
.表演{
显示：块；
}
.包装纸{
最小宽度：800px；
保证金：自动；
}
我们的方法
我们是谁
商业信息
建议晚上
/*当用户单击按钮时，
在隐藏和显示下拉内容之间切换*/
让closeDropdown=函数（）{
}
函数myFunction（num）{
关闭下拉菜单（）；
让el=document.getElementById（“myDropdown”+num）；
如果（el）{
el.classList.toggle（“显示”）；
closeDropdown=函数（）{
el.类列表。删除（“显示”）；
}
}否则{
closeDropdown=函数（）{
} 
}
}
    已经给出了css解决方案。 下面是我的javascript解决方案。 用我的代码替换你的javascript代码

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

}
var oldselection = 0;
function myFunction(num) {
  if(oldselection != 0){
  document.getElementById('myDropdown'+oldselection).classList.remove("show");
// hiding the old dropdown
}
  closeDropdown();
  let el = document.getElementById("myDropdown" + num);  
  if (el) {
    el.classList.toggle("show");
    closeDropdown = function() {
        el.classList.remove("show");
    }
  } else {
    closeDropdown = function() {
    } 
  }
oldselection = num;
}    

</script>

    
/*当用户单击按钮时，
在隐藏和显示下拉内容之间切换*/
让closeDropdown=函数（）{
}
var-oldselection=0；
函数myFunction（num）{
如果（旧选择！=0）{
document.getElementById（'myDropdown'+oldselection.）.classList.remove（“show”）；
//隐藏旧的下拉列表
}
关闭下拉菜单（）；
让el=document.getElementById（“myDropdown”+num）；
如果（el）{
el.classList.toggle（“显示”）；
closeDropdown=函数（）{
el.类列表。删除（“显示”）；
}
}否则{
closeDropdown=函数（）{
} 
}
oldselection=num；
}
    在这段代码中，我添加了一个名为“oldselection”的变量，并存储了以前选择的下拉列表“num”值。在下一次选择中，我只是使用旧的选定值来隐藏其关联的内容。

    另一个答案没有解决的一件事是，如果单击页面上的其他位置，如何也隐藏下拉列表。我发现添加下面的代码解决了这个问题：

    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');
      }
    }
  }
}

    window.onclick=函数（事件）{
如果（！event.target.matches（'.dropbtn'））{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
var i；
对于（i=0；i
    这是一个完美的选择。有条件地改变函数所做的事情会让我的头脑崩溃。谢谢 
    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');
      }
    }
  }
}