基于生成列表的jQuery SlideToggle功能实现问题

嘿，我明白你的困扰——现在点击任何一个"See all routes"按钮会同时操作所有分类的列表，这肯定不是你想要的。其实只需要调整一下jQuery的选择逻辑，就能让每个按钮只控制自己所在的分类块，不用为每个分类单独写函数，一起来看看怎么改：

首先，我们需要默认隐藏每个列表里第5个及以后的项，先加一段CSS：

/* 默认隐藏第5个及以后的列表项 */
.term-list li:nth-of-type(1n+5) {
    display: none;
}

然后修改你的jQuery代码，核心是利用this来定位当前按钮对应的分类块，而不是全局查找：

jQuery('.see-all').on('click', function() {
    // 1. 找到当前点击按钮所在的分类块容器
    // 2. 在这个容器里找到对应的列表项
    // 3. 切换显示/隐藏
    jQuery(this).closest('.overview-block-travel-inner')
                .find('ul.term-list li:nth-of-type(1n+5)')
                .slideToggle();
    
    // 可选优化：切换按钮文字，提升用户体验
    jQuery(this).text(function(index, currentText) {
        return currentText.includes("See all") ? "Show less" : "See all routes";
    });
});

代码解释： #

• jQuery(this)：代表当前被点击的那个按钮，这是关键——我们不再全局操作所有按钮，而是聚焦于用户实际点击的那个。
• .closest('.overview-block-travel-inner')：向上查找最近的父级分类块容器，这样就精准锁定了当前按钮所属的分类，不会影响其他分类块。
• .find(...)：在这个锁定的容器里，只操作它内部的列表项，完美实现独立控制。

你的PHP代码完全不需要修改，因为我们用的是通用类名，所有分类块都能复用这套逻辑，不用再依赖$term->slug来单独设置类啦。

现在测试一下，每个分类块的按钮只会展开/收起自己的列表，完全独立，而且一套代码搞定所有分类~

内容的提问来源于stack exchange，提问作者Barry Olij