javascript - 显示/隐藏相同的 id

Question

我在 Stackoverflow 上搜索了很多，寻找我的问题的解决方案，但没有人帮助我。我有多个显示/隐藏(切换)内容，具有相同的 id，我想要打开其中唯一一个(我需要的)内容，而不是全部内容。这是我的JSFiddle你可以测试一下。

这是我的 JavaScript

$("#view").click(function(){
  $('.hidden-content').slideToggle(500).toggleClass("active");
});

Answer 1

单个文档中不能有重复的 id 属性。当您执行此操作时，仅识别具有给定 id 的第一个元素；这就是你所看到的问题。

改为更改 view 元素以使用类，然后在 click 事件处理程序中使用 this 引用来遍历 DOM 以查找相关的 .hidden-content 元素并切换它。试试这个:

$(".view").click(function() {
  $(this).closest('.div').find('.hidden-content').slideToggle(500).toggleClass("active");
});

.div {
  width: 400px;
}
.content {
  padding: 10px;
}
.view {
  color: red;
  cursor: pointer;
}
.hidden-content {
  display: none;
}
.hidden-content .active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
  <div class="content">
    <div class="view">view/edit</div>
  </div>
  <div class="hidden-content">
    hidden content
  </div>
</div>

<div class="div">
  <div class="content">
    <div class="view">view/edit</div>
  </div>
  <div class="hidden-content">
    hidden content
  </div>
</div>

<div class="div">
  <div class="content">
    <div class="view">view/edit</div>
  </div>
  <div class="hidden-content">
    hidden content
  </div>
</div>