如何结合jQuery的toggle与closest实现列表的显示/隐藏

我希望用jQuery的toggle方法结合closest方法实现列表项的显示/隐藏功能，现在逐个元素编写代码的方式太繁琐了。以下是我的HTML结构和当前JS代码：

当前HTML结构 #

<div class="sidebar-suboptions-box3 main-head-trigger">
    <a href="javascript:void(0)" class="sidebar-suboptions-content dsp-f bullet-point active">
        <div>
            <div class="sidebar-holder-portf">Portafolio 100000-1</div>
            <div class="sidebar-suboptions-money">$ 1,022,158.81</div>
        </div>
    </a>
</div>
<div class="block-profile-portfolios-secondary main-body-trigger" style="display: none;">
    <hr class="sidebar-inteligo-hr-2">
    <div>
        <div class="head-portfolio-active cash-head-trigger">
            <div class="sidebar-suboptions-title horizontal-bar"> <em>Cash</em> y equivalentes
                <br><div class="sidebar-suboptions-money">$ 726,134.93</div>
            </div>
        </div>
        <div class="portfolio-active-subitems cash-body-trigger" style="display: none;">
            <div class="portfolio-active-subitems-head">
                <div class="sidebar-subblock-secondary-2">
                    <div class="sidebar-subblock-title">Cuenta trading
                        <br><div class="sidebar-subblock-money-2">$ 726,134.93</div>
                    </div>
                </div>
                <div class="sidebar-subblock-secondary-2">
                    <div class="sidebar-subblock-title">Prod. estructurados
                        <br><div class="sidebar-subblock-money-2">$ 726,134.93</div>
                    </div>
                </div>
                <div class="sidebar-subblock-secondary-2">
                    <div class="sidebar-subblock-title">Depósitos
                        <br>
                        <div class="sidebar-subblock-money-2">$ 726,134.93</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="head-portfolio-active activos-head-trigger">
            <div class="sidebar-suboptions-title horizontal-bar">Activos
                <br><div class="sidebar-suboptions-money-2">$ 726,134.93</div>
            </div>
        </div>
        <div class="portfolio-active-subitems activos-body-trigger" style="display: none;">
            <div class="portfolio-active-subitems-head">
                <div class="sidebar-subblock-secondary-2">
                    <div class="sidebar-subblock-title">Cuenta trading
                        <br><div class="sidebar-subblock-money-2">$ 726,134.93</div>
                    </div>
                </div>
                <div class="sidebar-subblock-secondary-2">
                    <div class="sidebar-subblock-title">Prod. estructurados
                        <br><div class="sidebar-subblock-money-2">$ 726,134.93</div>
                    </div>
                </div>
                <div class="sidebar-subblock-secondary-2">
                    <div class="sidebar-subblock-title">Depósitos
                        <br>
                        <div class="sidebar-subblock-money-2">$ 726,134.93</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

当前JS代码 #

$( ".main-head-trigger" ).click(function() {
    $( ".main-body-trigger" ).toggle( "fast", function() {
      // Animation complete.
    });
});

优化方案：批量绑定事件+相对DOM定位 #

不需要为每个触发元素单独编写事件处理函数，利用jQuery的选择器和DOM相对定位方法（closest/next），可以一次性处理所有折叠面板：

方案1：适配现有类名规则（无需修改HTML）

你的HTML已经遵循了*-head-trigger对应*-body-trigger的命名规则，且触发头和内容块是同级元素，直接用属性选择器和next()定位：

// 匹配所有以-head-trigger结尾的触发元素
$('[class$="-head-trigger"]').on('click', function() {
    // 找到对应的以-body-trigger结尾的内容块，切换显示状态
    $(this).next('[class$="-body-trigger"]').toggle('fast');
});

方案2：用closest增强结构灵活性（推荐）

如果后续DOM结构调整，触发头和内容块不再是同级，可以给每个折叠组加一个父容器，用closest定位到父容器后，再查找对应的内容块：

首先调整HTML（给每个折叠组加父容器，用通用类名简化选择）：

<!-- 外层折叠组 -->
<div class="collapse-group">
    <div class="sidebar-suboptions-box3 collapse-head">
        <!-- 触发头内容 -->
    </div>
    <div class="block-profile-portfolios-secondary collapse-content" style="display: none;">
        <!-- 内层折叠组 -->
        <div class="collapse-group">
            <div class="head-portfolio-active collapse-head">
                <!-- 子触发头内容 -->
            </div>
            <div class="portfolio-active-subitems collapse-content" style="display: none;">
                <!-- 子内容块 -->
            </div>
        </div>
        <div class="collapse-group">
            <div class="head-portfolio-active collapse-head">
                <!-- 子触发头内容 -->
            </div>
            <div class="portfolio-active-subitems collapse-content" style="display: none;">
                <!-- 子内容块 -->
            </div>
        </div>
    </div>
</div>

然后编写JS：

// 给所有触发头绑定点击事件
$('.collapse-head').on('click', function() {
    // 找到最近的折叠组父容器，再查找对应的内容块
    $(this).closest('.collapse-group').find('.collapse-content').toggle('fast');
});

优化优势 #

• 扩展性强：新增折叠面板时，只需按类名规则编写HTML，无需修改JS
• 代码简洁：避免重复编写大量相同逻辑的事件处理函数
• 冲突风险低：利用相对DOM定位，不会影响页面其他元素

内容的提问来源于stack exchange，提问作者José Carlos