Question

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

这是我的JavaScript

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

Answer 1

单个文档中不能包含重复的id属性。当您执行时，只识别具有给定id的第一个元素;因此，您已经看到了这个问题。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

您可以按照以下方式更改点击事件，以使其有效。

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

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

请参阅此answer，它提供了有关多个元素具有相同id属性值时的工作原理的更多信息。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

您应该将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>

用相同的ID显示/隐藏

4 个答案: