显示/隐藏相同的 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>

Answer 2

对多个元素使用相同的 id 是一种不好的做法。

你可以试试下面的

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

您的 jquery 将如下所示

$(".view").click(function(){
  $(this).parent('.content').next('.hiddencontent').slideToggle(500).toggleClass("active");
});

Answer 3

您应该将id 替换为class。对于手风琴，您可以像下面这样使用。

HTML，

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

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

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

Js，

<script>

$(document).ready(function(){
    $(".hidden-content").hide();
    $(".view").on('click', function(){

        $(this).parents().parents().find(".hidden-content").slideToggle(500).toggleClass("active");

        if($(this).parents().parents().siblings().find(".hidden-content").hasClass('active')){
            $(this).parents().parents().siblings().find(".hidden-content").removeClass('active');
            $(this).parents().parents().siblings().find(".hidden-content").hide();
        }
    });
});

 </script>

Answer 4

您可以按如下方式更改您的点击事件以使其工作。

$("div[id='view']").click(function() {
  $(this).parent().next().slideToggle(500).toggleClass("active");
});

注意：多个元素不应该有相同的 id，id 属性值应该是唯一的，因为 id 属性用于在 DOM 中唯一地标识一个元素。您可以为不同的元素使用相同的类名。

请参考answer，它提供了更多关于当多个元素具有相同的 id 属性值时如何工作的信息。

$("div[id='view']").click(function() {
  $(this).parent().next().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/1.2.3/jquery.min.js"></script>
<div class="div">
  <div class="content">
    <div id="view">view/edit</div>
  </div>

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

<div class="div">
  <div class="content">
    <div id="view">view/edit</div>
  </div>

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

<div class="div">
  <div class="content">
    <div id="view">view/edit</div>
  </div>

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

<div class="div">
  <div class="content">
    <div id="view">view/edit</div>
  </div>

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