jQuery显示/隐藏多个没有特定类/id的元素

Question

我有以下HTML和JS代码来显示/隐藏一个div。目前它运转良好。但是我想在一个页面上使用多个Box，所以我需要一个函数来知道单击了哪个框头。

是否有可能只在单击的框标题div之后触发方框内容div？如果我不用为每个盒子都使用特定的id，那就太好了。

这是我的密码：

HTML：

<div class="content-box">
    <div class="box-header open-close">
        Title
    </div>
    <div class="box-content">
        Content
    </div>
</div>

联署材料：

$(document).ready(function(){
    $(".box-content").hide();

    $(".open-close").click(function () {
        $(".box-content").slideToggle("slow");
    });
});

Answer 1

您可以找到与单击的box-content元素相关的open-close元素。

在给定的标记中，它是单击元素的下一个元素。

$(document).ready(function(){
    $(".box-content").hide();

    $(".open-close").click(function () {
        //as @insertusernamehere said the selector ".box-content" is not required
        //$(this).next(".box-content").slideToggle("slow");
        $(this).next().slideToggle("slow");
    });
});

演示：小提琴

Answer 2

您可以执行以下操作

$(document).ready(function(){
    $(".box-content").hide();

    $(".open-close").click(function () {
        $(this).siblings(".box-content").slideToggle("slow");
    });
});