Question

我想点击一个元素来切换一个完全不相关的元素（不是孩子，父母或兄弟）上被引用的类

例如，最初代码如下所示：

<div class="persons_contacts_details glyphicon glyphicon-option-vertical"></div>
          <div class="drop_content">
            <div class="nav_item">
              Edit
            </div>
            <div class="nav_item">
              Move to...
            </div>
            <div class="nav_item_remove">
              Remove
            </div>
          </div>

CSS：

.drop_content {
    display: none;
}
.show {
    display: block;
    z-index: 44;
    position: absolute;
    top: -7px;
    right: -10px;
    padding: 20px;
    box-sizing: border-box;
    min-width: 120px;
    background-color: #fff;
    box-shadow: 1px 2px 14px 1px #afafaf;
}

可能有很多块，所以我不考虑通过id搜索元素的选项。我认为使用getElementsByClassName会更好。但请帮我解决这个问题:) 我的代码：

var menuEl = document.getElementsByClassName("persons_contacts_details");
var dropcont = document.getElementsByClassName("drop_content");

for (var i = 0; i < menuEl.length; i++) {
    menuEl[i].addEventListener("click", function () {
        this.classList.toggle("show"); 
    }, false);
}

非常感谢您提前!!!

Answer 1

.toggle() 是一个jQuery函数，不适用于.classList;它直接适用于元素本身。要使用原始JavaScript切换元素，最简单的解决方案是在执行切换的元素中添加 onclick ，并使用if/else进行交换none和block之间的 style.display 。

这可以在以下工作示例中看到：

var hidden = document.getElementsByClassName("hidden")[0];

function toggle() {
  if (hidden.style.display === "none") {
    hidden.style.display = "block";
  } else {
    hidden.style.display = "none";
  }
}

.hidden {
  display: none;
}

<div class="controller" onclick="toggle()">Toggle!</div>
<div class="hidden">I'm Hidden!</div>

希望这有帮助！：）

我想点击一个元素来切换一个完全不相关的元素（不是子元素，父元素或兄弟元素）上引用的类

1 个答案: