时间戳

首页 > 解决方案 > Javascript - 多个自定义下拉菜单无法按预期工作

javascript - Javascript - 多个自定义下拉菜单无法按预期工作

问题描述

我使用 javascript 创建了下拉菜单。它适用于一个菜单。

所以有什么问题？

问题是当我有多个菜单并单击其中一个时，所有下拉菜单都会打开。

这是我的代码：

/* When the user clicks on the button, 
        toggle between hiding and showing the dropdown content */
function cDropdown($class) {

  var dropdownContent = document.getElementsByClassName($class);

  for (var i = 0; i < dropdownContent.length; i++) {
    dropdownContent[i].classList.toggle("show");
  }
}

var classname = document.getElementsByClassName("c-dropbtn");

for (var i = 0; i < classname.length; i++) {
  classname[i].addEventListener("click", function() {
    cDropdown("c-dropdown-content");
  });
}


// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.c-dropbtn')) {

    var dropdowns = document.getElementsByClassName("c-dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
/* The container <div> - needed to position the dropdown content */

.c-dropdown {
  position: relative;
  /*display: inline-block;*/
  margin-top: -15px;
}

/* Dropdown Content (Hidden by Default) */

.c-dropdown-content {
  position: absolute;
  top: 100%;
  left: auto;
  right: 11px;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 5rem;
  padding: .5rem 0;
  margin: .125rem 0 0;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2);
  border-radius: 6px;
}

/* Links inside the dropdown */

.c-dropdown-content .c-dropdown-item {
  width: 100%;
  padding: 1px 13px;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  font-size: 13px;
  font-weight: 600;
}

.c-dropdown-content .c-dropdown-item:hover {
  color: #e7515a;
}


/* Change color of dropdown links on hover */

.c-dropdown-content a:hover {
  background-color: #ddd
}


/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
  display: block;
}

.content {
  height: 100px;
  padding: 10px;
}
<div class="content">
  <div class="c-dropdown text-right">
    <span id="c-dropdonbtn" class="c-dropbtn mr-2">fs</span>
    <div id="myDropdown" class="c-dropdown-content">
      <div class="c-dropdown-item">View</div>
      <div class="c-dropdown-item">Delete</div>
    </div>
  </div>
</div>


<div class="content">
  <div class="c-dropdown text-right">
    <span id="c-dropdonbtn" class="c-dropbtn mr-2">fs</span>
    <div id="myDropdown" class="c-dropdown-content">
      <div class="c-dropdown-item">View</div>
      <div class="c-dropdown-item">Delete</div>
    </div>
  </div>
</div>

标签： javascriptdropdown

解决方案

您需要将dropbtn单击的元素传递给函数，然后在它之后直接显示元素，这是c-dropdown-content与之关联的元素。下面的代码片段完成了这项工作：

function cDropdown(e) {
  var dropdowns = document.getElementsByClassName("c-dropdown-content");
  for(var i = 0; i < dropdowns.length; i++) {
    dropdowns[i].classList.remove("show");
  }
  e.classList.toggle("show");
}

var classname = document.getElementsByClassName("c-dropbtn");

for (var i = 0; i < classname.length; i++) {
  classname[i].addEventListener("click", function() {
    cDropdown(this.nextElementSibling);
  });
}


// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.c-dropbtn')) {

    var dropdowns = document.getElementsByClassName("c-dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
.c-dropdown {
  position: relative;
  margin-top: -15px;
}

.c-dropdown-content {
  position: absolute;
  top: 100%;
  left: auto;
  right: 11px;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 5rem;
  padding: .5rem 0;
  margin: .125rem 0 0;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2);
  border-radius: 6px;
}

.c-dropdown-content .c-dropdown-item {
  width: 100%;
  padding: 1px 13px;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  font-size: 13px;
  font-weight: 600;
}

.c-dropdown-content .c-dropdown-item:hover {
  color: #e7515a;
}

.c-dropdown-content a:hover {
  background-color: #ddd
}

.show {
  display: block;
}

.content {
  height: 100px;
  padding: 10px;
}
<div class="content">
  <div class="c-dropdown text-right">
    <span class="c-dropbtn mr-2">fs</span>
    <div class="c-dropdown-content">
      <div class="c-dropdown-item">View</div>
      <div class="c-dropdown-item">Delete</div>
    </div>
  </div>
</div>


<div class="content">
  <div class="c-dropdown text-right">
    <span class="c-dropbtn mr-2">fs</span>
    <div class="c-dropdown-content">
      <div class="c-dropdown-item">View</div>
      <div class="c-dropdown-item">Delete</div>
    </div>
  </div>
</div>

我想补充一点，您不应该将一个 ID 用于多个元素。由于 ID 在这里无关紧要，因此我将其删除。

推荐阅读