手风琴上的状态依赖 class 个名字

Question

所以我有这个问题，我想是在公园散步才能解决。

我在我正在构建的网站上使用下面的 JS 片段，该片段的作用是为某些 HTML 元素创建手风琴，其中 class .bapf_head 是手风琴的 header（控制）和 .bapf_body 是 expand/collapse.

我编写了 if 逻辑，其中函数检查 .bapf_body 是否打开，然后将 class 添加或删除到 .bapf_head 取决于状态。然后这会产生一个 +/- 符号，根据状态指示 open/close。

所以问题是我有多个 Div 使用相同的 class 名称，并且所有这些都更新为 .open class 名称其中一个手风琴打开或关闭。假设我有三个手风琴，我打开了其中一个，然后所有三个都添加了 class .open，因此即使只有一个手风琴打开，所有三个都得到“-”符号。

有谁知道如何确保只有单击的手风琴得到更新 class-name 而不是所有的手风琴同时得到更新？

下面的代码；

jQuery(document).ready(function($) {
    $(".bapf_head").click(function () {
        $header = $(this);
        $content = $header.next();
        $content.slideToggle(300, function () {
            $header.text(function () {
                if ($content.is(":visible")) {
                    $(".bapf_head").addClass("open");
                } else {
                    $(".bapf_head").removeClass("open");
                };          
            });
        });
    });
});

Answer 1

     if ($content.is(":visible")) {
         $(this).addClass("open");
     } else {
         $(this).removeClass("open");
     };

您需要引用与事件相关的 DOM 元素，而不是 select 所有具有 class

的元素

此外，.click() 早已弃用 afaik，您应该使用 .on('click', ...

手风琴上的状态依赖 class 个名字

State dependent class names on accordion

javascript

jquery

class

accordion