gpt4 book ai didi

javascript - 如果用户单击第二个下 zipper 接,则关闭下拉菜单

转载 作者:行者123 更新时间:2023-11-28 05:10:32 30 4
gpt4 key购买 nike

我有一个带有多个下拉菜单的导航栏。因此,当我单击第一个链接时,它会打开下拉菜单,但是当我单击第二个链接时,第一个下拉菜单不会关闭。 (所以如果用户点击第二个链接我想关闭下拉菜单)

// 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()">&#9776;</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()">&#9776;</a>
</div>

关于javascript - 如果用户单击第二个下 zipper 接,则关闭下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57121966/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com