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

Question

我有以下 HTML 和 JS 代码来显示/隐藏 div。目前它工作正常。但是我想在一个页面上使用多个 Box，所以我需要一个函数来知道哪个 box-header 被点击了。

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

这是我的代码：

HTML：

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

JS：

$(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");
    });
});