jQuery Accordion仅列表首个元素生效问题排查与修复需求

问题 #

开发全站复用的jQuery Accordion组件时遇到以下问题：

• 点击任意Accordion按钮，仅父容器内第一个内容区域展开；
• 偶发所有Accordion内容同时展开的情况。

需求：实现单个Accordion独立开关的功能。

原因分析 #

原JS代码中$(".accordian-content").toggleClass("show")会选中页面上所有.accordian-content元素，导致点击操作作用于所有内容区域，而非当前点击按钮对应的内容。

修改后的代码 #

JavaScript #

(function ($) {
    $(".accord").on("click", function (e) {
        // 仅切换当前按钮下的内容区域
        const $content = $(this).find(".accordian-content");
        $content.toggleClass("show");
        
        // 同步切换图标（可选优化）
        $(this).find(".icon").text(function(i, text) {
            return text === "+" ? "-" : "+";
        });
    });
})(jQuery);

CSS #

.accord {
    background-color: $primary;
    color: #111;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}
.accordian-content {
    display: none;
    transition: max-height 0.4s ease; /* 可选：添加展开动画 */
    max-height: 0;
    overflow: hidden;
}

.accordian-content.show {
    display: block;
    max-height: 500px; /* 根据内容高度调整 */
}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<ul>
<li>
    <button class="accord menu w-full my-[15px] cursor-pointer">
        <div class="menu-item flex align-center p-2 justify-between gap-2 bg-primary">
            <div class="title uppercase text-white font-bold"><?php echo $title; ?></div>
            <span class="icon text-white scale-y-150 pr-[17.5px]">+</span>
        </div>
        <div class="accordian-content">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos totam, explicabo deserunt eaque molestiae dolorem perspiciatis? Eius iure veniam nulla architecto necessitatibus culpa debitis maxime velit voluptatum eos nesciunt quidem eveniet deleniti deserunt vel nemo ipsa beatae, harum dolore eligendi sequi quo unde. Adipisci minima id iste in nostrum voluptatibus.</p>
        </div>
    </button>
</li>
<li>
    <button class="accord menu w-full my-[15px] cursor-pointer">
        <div class="menu-item flex align-center p-2 justify-between gap-2 bg-primary">
            <div class="title uppercase text-white font-bold"><?php echo $title; ?></div>
            <span class="icon text-white scale-y-150 pr-[17.5px]">+</span>
        </div>
        <div class="accordian-content">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos totam, explicabo deserunt eaque molestiae dolorem perspiciatis? Eius iure veniam nulla architecto necessitatibus culpa debitis maxime velit voluptatum eos nesciunt quidem eveniet deleniti deserunt vel nemo ipsa beatae, harum dolore eligendi sequi quo unde. Adipisci minima id iste in nostrum voluptatibus.</p>
        </div>
    </button>
</li>
<li>
    <button class="accord menu w-full my-[15px] cursor-pointer">
        <div class="menu-item flex align-center p-2 justify-between gap-2 bg-primary">
            <div class="title uppercase text-white font-bold"><?php echo $title; ?></div>
            <span class="icon text-white scale-y-150 pr-[17.5px]">+</span>
        </div>
        <div class="accordian-content">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos totam, explicabo deserunt eaque molestiae dolorem perspiciatis? Eius iure veniam nulla architecto necessitatibus culpa debitis maxime velit voluptatum eos nesciunt quidem eveniet deleniti deserunt vel nemo ipsa beatae, harum dolore eligendi sequi quo unde. Adipisci minima id iste in nostrum voluptatibus.</p>
        </div>
    </button>
</li>
</ul>

关键修改点 #

• 使用$(this).find(".accordian-content")定位当前点击按钮下的内容区域，确保仅操作目标元素；
• 增加图标切换逻辑，提升用户体验；
• 可选：为内容区域添加展开/收起动画，优化视觉效果。

内容的提问来源于stack exchange，提问作者Dan Jones