Javascript 使用相同的ID显示/隐藏

我在Stackoverflow上搜索了很多，这是我问题的解决方案，但没有人帮我。我有一个多个显示/隐藏（切换）内容，具有相同的id，并且我想使它们中只有一个（我需要的）打开，而不是全部打开。这是我的建议，你可以测试一下

这是我的JavaScript

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

---

单个文档中不能有重复的

id

属性。执行此操作时，仅识别具有给定

id

的第一个元素；这就是你所看到的问题

相反，将

视图

元素更改为使用类，然后在

单击

事件处理程序中使用

this

引用来遍历DOM以查找相关的

。隐藏内容

元素并切换它。试试这个：

$（“.view”）。单击（函数（）{
$（this）.closest（'.div'）.find（'.hidden content'）.slideToggle（500）.toggleClass（“活动”）；
});
.div{
宽度：400px；
}
.内容{
填充：10px；
}
.视图{
颜色：红色；
光标：指针；
}
.隐藏内容{
显示：无；
}
。隐藏内容。活动{
显示：块；
}

查看/编辑
隐藏内容
查看/编辑
隐藏内容
查看/编辑
隐藏内容
对多个元素使用同一id是一种不好的做法

你可以试试下面的方法

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

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

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

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

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

请参阅此文档，它提供了有关当多个元素具有相同id属性值时如何工作的更多信息


$（“div[id='view']）。单击（函数（）{
$（this）.parent（）.next（）.slideToggle（500）.toggleClass（“活动”）；
});
.div{
宽度：400px；
}
.内容{
填充：10px；
}
#看法{
颜色：红色；
光标：指针；
}
.隐藏内容{
显示：无；
}
。隐藏内容。活动{
显示：块；
}

查看/编辑
隐藏内容
查看/编辑
隐藏内容
查看/编辑
隐藏内容
查看/编辑
隐藏内容
您应该将
id
替换为
class
。对于手风琴，您可以使用如下所示

HTML


查看/编辑
隐藏内容
查看/编辑
隐藏内容
查看/编辑
隐藏内容
查看/编辑
隐藏内容

Js


$（文档）.ready（函数（）{
$（“.hidden content”）.hide（）；
$（“.view”）。在（'click'，function（）上{
$（this）.parents（）.parents（）.find（“.hidden content”）.slideToggle（500）.toggleClass（“active”）；
if（$（this）.parents（）.parents（）.sibbins（）.find（“.hidden content”）.hasClass（'active'））{
$（this）.parents（）.parents（）.sibbins（）.find（“.hidden content”）.removeClass（'active'）；
$（this.parents（）.parents（）.sides（）.find（“.hidden content”）.hide（）；
}
});
});
id在HTML文档中必须是唯一的。
id
在页面中应该是唯一的。最好在多个元素中使用唯一的id和用于样式设置的类等。你可以使用jquery UIs accordion来实现这个@Matthijs现在真的重要了吗？
<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>

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