如何简化优化WordPress动态内容场景的jQuery手风琴代码

针对WordPress动态生成内容无法用纯CSS checkbox方案、现有jQuery代码三个区块逻辑重复的问题，直接用属性选择器统一绑定事件即可，不需要分别给.sl1/.sl2/.sl3写重复逻辑：

优化后代码 #

// 统一匹配所有sl类名区块下的菜单标题
jQuery('article[class*="sl"] .widget_nav_menu h3').on('click', function() {
  const $currentTitle = jQuery(this);
  // 替换为你现有代码中实际的菜单容器选择器即可
  const $menuWrap = $currentTitle.next('.menu-container');

  $menuWrap.slideToggle('slow', function() {
    const isShow = $menuWrap.is(':visible');
    $currentTitle.text(isShow ? 'HIDE ALL TOPICS' : 'VIEW ALL TOPICS');
  });
});

优化说明 #

• 完全兼容现有WordPress小工具输出的HTML结构，不需要修改服务端生成的内容，也不依赖纯CSS实现必需的input标签结构
• 消除了三个完全重复的事件绑定逻辑，后续如果新增.sl4/.sl5这类同结构区块，不需要额外写JS代码，只要给article加上对应sl开头的类名就会自动绑定交互
• 做了DOM查询缓存，避免每次点击都重复遍历DOM树，性能比重复绑定的写法更好
• 1:1保留原有交互特性：slow速率的动画、标题文本切换规则、行内样式控制的初始显示状态完全兼容，不会出现效果偏差

注意：如果你的菜单容器不是h3的紧邻下一个元素，把代码里的.next('.menu-container')换成你原代码中用来判断display属性的菜单元素选择器即可，其他逻辑不需要调整。

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