如何用JavaScript/jQuery实现关联元素的内容显隐切换？

步骤1：基础样式（CSS） #

通过CSS实现内容默认隐藏，以及选中标题的高亮样式：

/* 默认隐藏所有内容区块 */
.myContents {
  display: none;
}

/* 激活状态的标题样式（可自定义颜色/字体） */
.triggers.active {
  color: #e74c3c;
  font-weight: bold;
}

步骤2：保持原有HTML结构 #

你的HTML结构无需修改，只要保持titleN和contentN的ID对应规则即可：

<h3 id="title1" class="triggers">Title 1</h3> 
<h3 id="title2" class="triggers">Title 2</h3> 
<h3 id="title3" class="triggers">Title 3</h3>

<p id="content1" class="myContents">Content 1</p> 
<p id="content2" class="myContents">Content 2</p> 
<p id="content3" class="myContents">Content 3</p>

步骤3：jQuery逻辑实现 #

以下代码完全满足所有需求，且支持任意数量的标题/内容扩展：

$(document).ready(function() {
  // 给所有标题绑定点击事件
  $('.triggers').click(function() {
    // 从标题ID中提取编号，自动关联对应内容
    const itemIndex = $(this).attr('id').replace('title', '');
    const targetContent = $('#content' + itemIndex);
    
    // 判断当前标题是否处于激活状态
    const isCurrentActive = $(this).hasClass('active');
    
    // 重置所有标题和内容的状态：取消激活、隐藏内容
    $('.triggers').removeClass('active');
    $('.myContents').hide();
    
    // 如果当前标题未激活，则激活它并显示对应内容；否则保持隐藏状态
    if (!isCurrentActive) {
      $(this).addClass('active');
      targetContent.show();
    }
  });
});

需求对应说明 #

• 需求1：通过CSS的display: none默认隐藏所有.myContents元素
• 需求2：点击标题时，给当前标题添加active类实现变色，同时显示对应内容
• 需求3：每次点击先全局重置所有标题和内容的状态，再处理当前点击项，确保同一时间仅显示一个内容
• 需求4：通过判断当前标题是否有active类，实现“点击切换”逻辑：已激活则取消，未激活则激活
• 需求5：通过提取标题ID中的数字部分，自动拼接对应内容的ID，只要保持titleN和contentN的命名规则，即使扩展到几十条也无需修改代码

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