如何通过CSS/JS仅显示表单前5个选项并添加「查看更多」按钮？

步骤1：添加CSS隐藏多余选项 #

通过CSS默认隐藏第6个及以后的颜色选项，同时给后续要添加的按钮设置基础样式：

/* 隐藏第6个及以后的颜色选项 */
.t-product__option-variants_color .t-product__option-item:nth-of-type(n+6) {
    display: none;
}

/* 给「查看更多」按钮设置样式，可根据需求调整 */
.variant-toggle-btn {
    margin-top: 10px;
    padding: 6px 12px;
    border: 1px solid #ccc;
    background-color: #fff;
    cursor: pointer;
    font-size: 14px;
}

.variant-toggle-btn:hover {
    background-color: #f5f5f5;
}

/* 展开状态下显示所有选项 */
.t-product__option-variants_color.expanded .t-product__option-item:nth-of-type(n+6) {
    display: inline-block; /* 保持和原有选项一致的布局方式，若原选项是block则改为block */
}

步骤2：添加JavaScript实现切换逻辑 #

通过JS动态插入「查看更多」按钮，并实现点击切换显示/隐藏的功能：

// 定位目标表单元素
const variantForm = document.querySelector('.t-product__option-variants_color');
if (!variantForm) return; // 找不到目标元素则终止执行

// 创建切换按钮
const toggleBtn = document.createElement('button');
toggleBtn.className = 'variant-toggle-btn';
toggleBtn.textContent = '查看更多';

// 将按钮插入到表单后方
variantForm.after(toggleBtn);

// 绑定点击事件
toggleBtn.addEventListener('click', function() {
    const isExpanded = variantForm.classList.contains('expanded');
    if (isExpanded) {
        // 收起状态：隐藏多余选项，按钮文字切换为「查看更多」
        variantForm.classList.remove('expanded');
        this.textContent = '查看更多';
    } else {
        // 展开状态：显示所有选项，按钮文字切换为「收起」
        variantForm.classList.add('expanded');
        this.textContent = '收起';
    }
});

注意事项 #

• 确认原有选项的display属性（比如是inline-block还是block），调整CSS中展开状态的对应值，避免布局错乱；
• 代码仅针对带有t-product__option-variants_color类的表单生效，不会影响页面其他元素；
• 直接将上述CSS和代码粘贴到平台提供的CSS/JS区块即可，无需修改原有HTML代码。

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