Question

我有一个带有多个下拉菜单的导航栏。因此，当我单击第一个链接时，它将打开下拉列表，但是当我单击第二个链接时，第一个下拉列表不会关闭。（因此，如果用户单击第二个链接，我想关闭下拉菜单）

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

Answer 1

如果要使用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>

Answer 2

我建议您使用 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的名称，并将其存储到变量中并显示出来并隐藏另一个同级的下拉列表。 希望它会对您有所帮助！

Answer 3

我假设您的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);
})

如果用户单击第二个下拉链接，则关闭下拉菜单

3 个答案: