show/hide 具有相同的 ID

Question

我在 Whosebug 上搜索了很多，解决了我的问题，但没有一个帮助我。我有多个 show/hide（切换）内容，具有相同的 ID，我想制作，其中唯一一个，我需要的，打开，而不是全部。这是我的JSFiddle你可以测试一下

这是我的JavaScript

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

Answer 1

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

而是将 view 元素更改为使用 class，然后使用 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

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

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

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

请参考此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>

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>

show/hide 具有相同的 ID

show/hide with same ids

javascript

jquery

show-hide