如何用jQuery将主标题改为选中列表项名称并恢复原标题？

实现逻辑 #

• 先保存主标题的原始文本，用于无选中项时恢复
• 为所有列表项（包括父级和子级）绑定点击事件，点击时更新主标题为当前项的文本，并标记选中状态
• 点击页面非列表区域时，恢复原始标题并清除所有列表项的选中状态
• 保留原有的折叠展开功能，改用jQuery重构以简化代码

完整代码 #

HTML

<div class="container">
  <div class="title">
    <h1>Change Title</h1>
  </div>
  <div class="list">
    <ul>
      <li>Item A<span class="caret"></span>
        <ul class="down">
          <li>Sub item A1</li>
          <li>Sub item A2</li>
          <li>Sub etc.</li>
        </ul>
      </li>
      <li>Item B<span class="caret"></span>
        <ul class="down">
          <li>list etc.</li>
        </ul>
      </li>
    </ul>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.container {
  background: silver;
  width: 300px;
  border: 1px solid;
  margin: 10px;
}
.title {
  background: #94a2e4;
  border-bottom: 1px solid;
  border-top: 1px solid;
  padding: 5px;
}
.list{font-size: 20px;}
.caret {
  cursor: pointer;
  user-select: none;
}
.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-left: 230px;
}
.caret-down::before {
  transform: rotate(90deg);  
}
.down {
  display: none;
  background: #e0e0e0;
}
.active {
  display: block;
}
/* 新增选中状态样式 */
.selected {
  background-color: #c0c0c0;
  font-weight: bold;
}

jQuery代码

// 确保DOM加载完成后执行
$(document).ready(function() {
  // 保存原始标题文本
  const originalTitle = $('.title h1').text();

  // 列表项点击事件：切换标题和选中状态
  $('.list li').on('click', function(e) {
    e.stopPropagation(); // 阻止事件冒泡，避免触发页面点击事件
    $('.list li').removeClass('selected');
    $(this).addClass('selected');
    // 获取列表项的纯文本内容（排除caret和子元素）
    const itemText = $(this).contents().filter(function() {
      return this.nodeType === 3;
    }).text().trim();
    $('.title h1').text(itemText);
  });

  // 折叠展开功能
  $('.caret').on('click', function(e) {
    e.stopPropagation(); // 阻止触发父级li的点击事件
    $(this).siblings('.down').toggleClass('active');
    $(this).toggleClass('caret-down');
  });

  // 点击页面其他区域恢复原始标题
  $(document).on('click', function(e) {
    if (!$('.list').is(e.target) && $('.list').has(e.target).length === 0) {
      $('.list li').removeClass('selected');
      $('.title h1').text(originalTitle);
    }
  });
});

关键说明 #

• 使用e.stopPropagation()避免事件冲突：点击caret时不会触发父级li的标题切换，点击li时不会触发页面的标题恢复
• 通过contents().filter()获取列表项的纯文本，避免把caret图标或子元素的内容包含进去
• 新增selected类让用户直观看到当前选中的列表项

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