javascript - 在 Jquery 和 Bootstrap 中获取可折叠 div 的 id

Question

我有多个(可以超过 100 个)可折叠的 div(使用 Bootstrap )

<div>
    <a href="#id1" data-toggle="collapse">
       <div class="col-lg-12">Title</div>
       <div class="image">Image</div>
    </a>
    <div id="id1" class="collapse">
       <div class="col-lg-12">Description</div>
    </div>
</div>
<div>
    <a href="#id2" data-toggle="collapse">
       <div class="col-lg-12">Title</div>
       <div class="image">Image</div>
    </a>
    <div id="id2" class="collapse">
       <div class="col-lg-12">Description</div>
    </div>
</div>

并且有Jquery

$('#id1').on('show.bs.collapse', function () {
            $(".image").addClass('hidden');
        });

$('#id1').on('hidden.bs.collapse', function () {
        $(".image").removeClass('hidden');
    });

我想在 show.bs.collapse 上添加 hidden 类(这是来自 bootstrap)并删除 上的 hidden 类hidden.bs.collapse'使用上面的 jq 代码，我只需使用一个具有 id1 的 div 即可完成此操作。但是我怎样才能独立完成这项工作呢？

Answer 1

尽量不要按id订阅元素，而是按元素类型订阅

$('a').on('show.bs.collapse', function () {
    $(this).next().find("div.image")[0].addClass('hidden');
});

$('a').on('hidden.bs.collapse', function () {
    $(this).next().find("div.image")[0].removeClass('hidden');
});

在哪里

$(this)

应该返回一个指向折叠/未折叠元素的指针

next()

应该将指针移动到下一个元素(例如 div id="id1")

find("div.image")[0]

将找到类为“image”的 div 并获取第一个找到的元素

然后你可以隐藏这个 block 中的图像或不使用ids显示它

如果你正在使用

$(".image").addClass('hidden');

这将隐藏所有 block 中的所有图像(不仅在已折叠的那个中)