Javascript 切换页面上出现两次的元素

我正在使用一个html组件，它在一个页面上出现两次

我遇到的问题是，当我单击一个组件切换其内容（如手风琴）时，两个组件同时切换

当我分别单击组件时，如何重写JS以切换每个组件，而不给组件不同的类并重写JS两次

这就是我目前所拥有的

var bindEventsToUI = function () {        
        $(".details").click(function(e){
            $(".content").slideToggle("slow", function() {
                $(e.target).hide().siblings().show();
            });
        });
    };

---

每个元素都需要有不同的标识符。我建议使用

id

：

var bindEventsToUI = function () {//element) {        
    $("#id1 .details").click(function(e){
        $("#id1 .content").slideToggle("slow", function() {
            $(e.target).hide().siblings().show();
        });
    });
    $("#id2 .details").click(function(e){
        $("#id2 .content").slideToggle("slow", function() {
            $(e.target).hide().siblings().show();
        });
    });
    //..and so on
};

或者，您可以使用

最近的
功能：

var bindEventsToUI = function () {//element) {        
    $(".details").click(function(e){
        $(this).closest(".content").slideToggle("slow", function() {
            $(e.target).hide().siblings().show();
        });
    });
};

试试这个：


$（“.details”）。单击（函数（e）{
$（此）.children（.content”）.slideToggle（“慢”）；
});

测试123
>内容123
测试456
>内容456
是否每个
.content
都是每个
.details
的子项？答案将取决于您的HTML结构（特别是每个
.content
都与您想要控制它的
.details
组件相关。）@matmo如果没有其他详细信息，我假设下面的答案就是这种情况，这演示了如何使用
$（this）.children（）
。我会使用
$（e）.find（.content”）
来代替
。content
不是
.details
的直接子项，但这也是我会使用的一般解决方案（假设
.content
是
.details
的孩子，当然。谢谢，并同意！这是一个简单的例子，因为没有与html结构相关的信息，但是
.find（）
是正确的选择，如果
.content
比
details
更深一层。