堆棧內存溢出
  簡體   English   中英

當用戶點擊其他地方時，如何隱藏導航欄的下拉菜單？

[英]How do I hide the dropdown of a navbar when a user clicks elsewhere?

 原文  2019-10-27 18:24:03  5   3    javascript/ html/ css

問題描述

我正在使用帶有下拉菜單的導航欄構建一個新網站，並且希望在單擊另一個按鈕或網站的其他部分時使下拉菜單消失。 我該如何編碼？

下面的代碼是我試圖讓它工作的最新實驗。 當它是一個按鈕時它工作得很好，但我無法將它擴展到多個按鈕。 我對此很陌生，並正在努力學習。

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

我嘗試在 MyFunction 的開頭包含這一行：

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

但這只是完全停止顯示下拉內容。

  1. 當我點擊其他地方時，如何使下拉內容消失？
  2. 當我單擊另一個下拉內容時，如何使下拉內容消失？
  3. 這是一個額外的問題並且不是必需的：如何在最后清理 window.onclick 以使我不會重復相同的代碼 n 次？

3 個解決方案

解決方案1
 3 已采納  2019-10-27 18:44:15

有多種方法。 我有點喜歡有單獨的 function 變量來清除以前的操作：

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

解決方案2
 2  2019-10-27 19:22:30

另一個答案沒有解決的一件事是，如果單擊頁面上的其他位置，如何也隱藏下拉列表。 我發現添加下面的代碼解決了這個問題：

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

解決方案3
 1  2019-10-27 19:18:45

已經給出了 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>

在這段代碼中，我剛剛添加了 1 個名為“oldselection”的變量，並存儲了先前選擇的下拉列表“num”值。 在下一次選擇期間，我只是使用舊的選定值來隱藏其相關內容。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 當用戶在下拉菜單之外單擊時如何隱藏下拉菜單 用戶在菜單外單擊時如何關閉Bootstrap導航欄下拉菜單？ 用戶單擊欄圖標時如何隱藏/顯示導航欄？ 當用戶單擊導航鏈接時，如何使導航欄停止消失？ 如何在單擊時以及用戶單擊時使用jquery隱藏元素？ 當用戶再次單擊下拉菜單時，如何隱藏當前選擇的li項目？ 用戶點擊時如何關閉下拉菜單 用戶單擊正文時如何隱藏div 當用戶單擊已打開的“類別”時，如何獲取我的代碼以關閉下拉菜單？ 在用戶單擊導航鏈接之前，如何將導航欄項默認設置為活動狀態？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM