点击面板标题切换右侧图标：JavaScript替代代码咨询

修改后的代码实现 #

JavaScript

// 绑定标题点击事件，切换图标与面板状态
$('.title_panel h5').click(function(evt) {
  // 阻止事件冒泡到父级li元素，避免重复触发面板切换
  evt.stopPropagation();
  
  const $parentLi = $(this).closest('.title_panel');
  // 切换向右/向下图标显示状态
  $parentLi.find('.icon-title-right_panel').toggle();
  $parentLi.find('.icon-title-down_panel').toggle();
  
  // 切换子面板的展开/收起
  $parentLi.children('ul').slideToggle();
});

原有CSS（无需修改）

.MyPanel ul li {
  cursor: pointer;
  position: relative;
}

.MyPanel ul li .icon-title-right_panel,
.MyPanel ul li .icon-title-down_panel {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 30px;
}

.MyPanel ul li .icon-title-down_panel {
  display: none;
}

原有HTML（无需修改）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"/>

<div class="MyPanel">
  <ul class="body_panel">
    <li class="title_panel">
      <h5>title</h5>
      <span class="fas fa-circle-chevron-right icon-title-right_panel"></span> 
      <span class="fas fa-circle-chevron-down icon-title-down_panel"></span> 
      <ul class="box-contect_panel">
        <li class="contect_panel">
          <h1>contect</h1>
        </li>
      </ul>
    </li>
  </ul>
</div>

改动说明 #

• 事件绑定目标调整：将原绑定在li上的点击事件，改为绑定到标题元素h5，精准响应标题点击操作。
• 事件冒泡控制：通过evt.stopPropagation()阻止事件向上传递到父级li，避免重复触发面板切换逻辑。
• 图标切换逻辑：通过closest('.title_panel')定位标题的父级li，再切换内部图标的显示状态。
• 联动面板状态：在标题点击事件中整合slideToggle()，实现点击标题同时完成图标切换与面板展开/收起的联动效果。

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