如何将列表项点击展开折叠功能改为红色按钮触发折叠？

我来帮你搞定这个需求！咱们先理清楚原代码的逻辑：它默认隐藏了列表里的子菜单，只有带.expanded类的项会展开，点击列表项的a标签可以切换展开/折叠状态。现在要加个红色按钮来触发折叠操作，其实很简单，只需要给按钮绑定一个点击事件，统一处理所有展开的列表项就行。

具体修改步骤： #

1. 确保红色按钮存在：先在你的HTML里添加这个红色按钮（如果还没加的话），可以给它加个类方便选择，比如：

<button class="red-collapse-btn" style="background-color: red; color: white; border: none; padding: 8px 16px;">全部折叠</button>

2. 添加按钮的点击事件逻辑：在你现有的JS代码后面，加上这段代码：

// 给红色按钮绑定点击事件，注意选择器要和你按钮的class对应
$('.red-collapse-btn').click(function() {
  // 遍历所有处于展开状态的列表触发元素
  $('li > a.expanded').each(function() {
    // 和点击列表项时的折叠逻辑保持一致：切换类+隐藏子菜单
    $(this).removeClass('expanded').addClass('collapsed').next('ul').hide('normal');
  });
});

逻辑说明： #

• 我们通过$('li > a.expanded')找到所有已经展开的列表项的触发标签（也就是带.expanded类的a）
• 用.each()遍历这些元素，逐一执行折叠操作：移除展开类、添加折叠类、隐藏对应的子菜单，和原有的点击折叠逻辑完全匹配，保证样式和交互的一致性
• 如果你的红色按钮只需要折叠某个特定区域的列表，只要把选择器改成$('#特定容器ID li > a.expanded')就行，灵活调整范围

完整的JS代码参考： #

$('li > ul').hide();
// 激活带有expanded类的项，显示子菜单
$('li > .expanded ~ ul').show('normal');

// 原有列表项点击切换逻辑
$('li > a').click(function() {
  $(this).find('ul').hide();
  $(this).toggleClass('expanded').toggleClass('collapsed').next('ul').toggle('normal');
});

// 新增红色按钮折叠逻辑
$('.red-collapse-btn').click(function() {
  $('li > a.expanded').each(function() {
    $(this).removeClass('expanded').addClass('collapsed').next('ul').hide('normal');
  });
});

这样点击红色按钮的时候，所有展开的子菜单就会全部折叠起来啦！

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