Bootstrap折叠面板“展开全部”按钮仅第二次点击生效问题求助

问题根源 #

你的代码里判断按钮文本时，HTML中<p id="travelClick">的内容带了前导空格（ Expand All +），但JS里判断的是无空格的"Expand All +"，导致第一次点击时条件不匹配，展开逻辑根本没执行；第二次点击时按钮文本已经被改成无空格的"Collapse All -"，条件才匹配，所以出现首次点击没反应、第二次才生效的情况。另外原代码只处理了面板内容的展开/收起，没同步更新面板触发按钮的状态，会导致单个面板点击和全控按钮的状态错乱。

修复后的完整代码 #

HTML #

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<p class="text-right" id="travelClick" onclick="travelAccordion()">Expand All +</p>
<div class="panel-group" id="travel-accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <a aria-expanded="false" class="collapsed" data-parent="#travel-accordion" data-toggle="collapse" href="#collapse1">
        <h4 class="panel-title">Group 1</h4>
      </a>
    </div>
    <div class="panel-collapse collapse" id="collapse1">
      <div class="panel-body">
        Group 1 Text
      </div>
    </div>
    <div class="panel-heading">
      <a aria-expanded="false" class="collapsed" data-parent="#travel-accordion" data-toggle="collapse" href="#collapse2">
        <h4 class="panel-title">Group 2</h4>
      </a>
    </div>
    <div class="panel-collapse collapse" id="collapse2">
      <div class="panel-body">
        Group 2 Text
      </div>
    </div>
  </div>
</div>

CSS #

.panel-title:hover,
#travelClick {
  cursor: pointer;
}

JavaScript #

function travelAccordion() {
  var x = document.getElementById("travelClick");
  // 用trim()去除文本前后空格，彻底避免空格导致的判断错误
  var currentText = x.innerHTML.trim();
  
  if (currentText === "Expand All +") {
    x.innerHTML = "Collapse All -";
    // 展开所有面板
    $('#travel-accordion .collapse').collapse('show');
    // 同步更新触发按钮的状态：标记为已展开
    $('#travel-accordion [data-toggle="collapse"]')
      .attr('aria-expanded', 'true')
      .removeClass('collapsed');
  } else {
    x.innerHTML = "Expand All +";
    // 收起所有面板
    $('#travel-accordion .collapse').collapse('hide');
    // 同步更新触发按钮的状态：标记为已收起
    $('#travel-accordion [data-toggle="collapse"]')
      .attr('aria-expanded', 'false')
      .addClass('collapsed');
  }
}

核心修复点 #

1. 要么去掉HTML按钮文本的前导空格，要么在JS里用trim()处理文本后再判断，确保条件匹配准确。
2. 同步更新面板触发按钮的aria-expanded属性和collapsed类，保证按钮状态和面板状态一致，符合Bootstrap组件的规范。

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