[英]Close the dropdown menu if the user clicks on the second dropdown link
我有一個帶有多個下拉菜單的導航欄。 因此,當我單擊第一個鏈接時,它將打開下拉列表,但是當我單擊第二個鏈接時,第一個下拉列表不會關閉。 (因此,如果用戶單擊第二個鏈接,我想關閉下拉菜單)
// main.js (javascript file) function myFunction() { var x = document.getElementById("myTopnav1"); if (x.className === "topnav1") { x.className += " responsive1"; } else { x.className = "topnav1"; } } function toggleDropDown(myid) { var element = document.getElementById(myid); element.classList.toggle("mystyle"); } // 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('mystyle')) { openDropdown.classList.remove('mystyle'); } } } }
/* style.css (css file - css is all correct if anything you think is not added i only need help with javascript) */ .topnav1 { background-color: blue !important; } /* Style the links inside the navigation bar */ .topnav1 a { float: left; display: block; color: black; text-align: center; padding: 4px 8px; text-decoration: none; font-size: 10px; border-bottom: 1px solid #FDFDFD; } .topnav-right1 { float: right; } @media only screen and (max-width:768px) { .topnav-right1 { float: left; } } .para-active { background-color: #4F7ADA !important; color: black !important; } .para-active button { color: white !important; } /* Add an active class to highlight the current page */ .active1 { color: black !important; } /* Hide the link that should open and close the topnav on small screens */ .topnav1 .icon { display: none; } /* Dropdown container - needed to position the dropdown content */ .dropdown1 { float: left; overflow: hidden; background-color: #f1f1f1; border-bottom: 1px solid #E3E3E3; } /* Style the dropdown button to fit inside the topnav */ .dropdown1 .dropbtn1 { font-size: 10px; border: none; outline: none; color: black; padding: 4px 8px; background-color: inherit; font-family: inherit; margin: 0; border-bottom: 1px solid #FDFDFD; } /* Style the dropdown content (hidden by default) */ .dropdown-content1 { display: none; position: absolute; background-color: #f9f9f9; min-width: 96px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .mystyle { display: block; }
<div class="topnav1" id="myTopnav1"> <div class="dropdown1"> <button style="display: none;" id="btn_em" onclick="toggleDropDown('div_em')" class="dropbtn1">Meters </button> <div class="dropdown-content1" id="div_em"> <label class="dropnav-container">one</label> <label class="dropnav-container">one</label> <label class="dropnav-container">one</label> </div> </div> <div class="dropdown1"> <button id="btn_inv" onclick="toggleDropDown('div_inv')" class="dropbtn1">Inverters </button> <div class="dropdown-content1" id="div_inv"> <label class="dropnav-container">two</label> <label class="dropnav-container">two</label> <label class="dropnav-container">two</label> </div> </div> <div class="dropdown1"> <button id="btn_inm" onclick="toggleDropDown('div_inm')" class="dropbtn1">Inverter Manager </button> <div class="dropdown-content1" id="div_inm"> <label class="dropnav-container">three</label> <label class="dropnav-container">three</label> <label class="dropnav-container">three</label> </div> </div> <div class="dropdown1"> <button id="btn_ws" onclick="toggleDropDown('div_ws')" class="dropbtn1">Sensors </button> <div class="dropdown-content1" id="div_ws"> <label class="dropnav-container">four</label> <label class="dropnav-container">four</label> <label class="dropnav-container">four</label> </div> </div> <div class="dropdown1"> <button id="btn_smu" onclick="toggleDropDown('div_smu')" class="dropbtn1">SMUs </button> <div class="dropdown-content1" id="div_smu"> <label class="dropnav-container">five</label> <label class="dropnav-container">five</label> <label class="dropnav-container">five</label> </div> </div> <a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a> </div>
如果要使用JavaScript進行此功能,則必須在打開新的下拉菜單后使用id來關閉其他下拉菜單。
因此,我正在研究的解決方案是創建一個新方法closeMenus
,一旦執行toggleDropDown
,它將關閉其他下拉菜單。
function myFunction() { var x = document.getElementById("myTopnav1"); if (x.className === "topnav1") { x.className += " responsive1"; } else { x.className = "topnav1"; } } function toggleDropDown(myid) { closeMenus(myid); var element = document.getElementById(myid); element.classList.toggle("mystyle"); } function closeMenus(currentId) { var dropdowns = document.getElementsByClassName("dropdown-content1"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('mystyle') && openDropdown.id !== currentId) { openDropdown.classList.remove('mystyle'); } } } // Close the dropdown menu if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.dropbtn1')) { closeMenus(); } }
.topnav1 { background-color: blue !important; } /* Style the links inside the navigation bar */ .topnav1 a { float: left; display: block; color: black; text-align: center; padding: 4px 8px; text-decoration: none; font-size: 10px; border-bottom: 1px solid #FDFDFD; } .topnav-right1 { float: right; } @media only screen and (max-width:768px) { .topnav-right1 { float: left; } } .para-active { background-color: #4F7ADA !important; color: black !important; } .para-active button { color: white !important; } /* Add an active class to highlight the current page */ .active1 { color: black !important; } /* Hide the link that should open and close the topnav on small screens */ .topnav1 .icon { display: none; } /* Dropdown container - needed to position the dropdown content */ .dropdown1 { float: left; overflow: hidden; background-color: #f1f1f1; border-bottom: 1px solid #E3E3E3; } /* Style the dropdown button to fit inside the topnav */ .dropdown1 .dropbtn1 { font-size: 10px; border: none; outline: none; color: black; padding: 4px 8px; background-color: inherit; font-family: inherit; margin: 0; border-bottom: 1px solid #FDFDFD; } /* Style the dropdown content (hidden by default) */ .dropdown-content1 { display: none; position: absolute; background-color: #f9f9f9; min-width: 96px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .mystyle { display: block; }
<div class="topnav1" id="myTopnav1"> <div class="dropdown1"> <button style="display: none;" id="btn_em" onclick="toggleDropDown('div_em')" class="dropbtn1">Meters </button> <div class="dropdown-content1" id="div_em"> <label class="dropnav-container">one</label> <label class="dropnav-container">one</label> <label class="dropnav-container">one</label> </div> </div> <div class="dropdown1"> <button id="btn_inv" onclick="toggleDropDown('div_inv')" class="dropbtn1">Inverters </button> <div class="dropdown-content1" id="div_inv"> <label class="dropnav-container">two</label> <label class="dropnav-container">two</label> <label class="dropnav-container">two</label> </div> </div> <div class="dropdown1"> <button id="btn_inm" onclick="toggleDropDown('div_inm')" class="dropbtn1">Inverter Manager </button> <div class="dropdown-content1" id="div_inm"> <label class="dropnav-container">three</label> <label class="dropnav-container">three</label> <label class="dropnav-container">three</label> </div> </div> <div class="dropdown1"> <button id="btn_ws" onclick="toggleDropDown('div_ws')" class="dropbtn1">Sensors </button> <div class="dropdown-content1" id="div_ws"> <label class="dropnav-container">four</label> <label class="dropnav-container">four</label> <label class="dropnav-container">four</label> </div> </div> <div class="dropdown1"> <button id="btn_smu" onclick="toggleDropDown('div_smu')" class="dropbtn1">SMUs </button> <div class="dropdown-content1" id="div_smu"> <label class="dropnav-container">five</label> <label class="dropnav-container">five</label> <label class="dropnav-container">five</label> </div> </div> <a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a> </div>
我假設您的mystyle類使下拉菜單處於活動狀態。 然后你可以做這樣的事情
// Get all the dropdowns
var dropdowns = document.getElementByClassName(".dropdown1")
// When clicked on dropdown this function will fire
var callThisFunction = function (e) {
// Check the event
e = e || window.event;
// Get the target element
let target = e.target || e.srcElement;
// Close all dropdowns
let activeDropdowns = document.getElementsByClassName("mystyle");
activeDropdowns.forEach(function (openDropdown) {
openDropdown.classList.remove('mystyle');
})
// Make the current dropdown active
target.className += 'mystyle'
}
// This adds click event listener to all dropdowns and tells it to fire callThisFunction when clicked
dropdowns.forEach(function (dropdown) {
dropdown[i].addEventListener('click', callThisFunction, false);
})
我建議您使用JQUERY (以下CDN)
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js
jQuery超快速且實用
因為您的問題將在jquery中這樣解決。
$('.yourdropdownsclass').on('click', function(){
var target = $(this).attr('id');
$("#"+target).show().siblings("div").hide();
});
.yourdropdownclass
是您的下拉菜單的類別
$(this).attr('id')
這是另一個下拉列表的ID。
$(“#” + target).show()。siblings(“ div”)。hide();
“目標”是其他下拉列表的ID的名稱,並將其存儲到變量中並顯示出來並隱藏另一個兄弟的下拉列表。 希望對您有幫助!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.