innerhtml 仅在第二次单击时更改

Question

我有一组面板，我想在单击时单独展开，但如果用户单击“展开+”，则文本应更改为“折叠”，并且所有面板都应展开。目前，这仅适用于第二次单击。我也尝试过使用“切换”。 预期功能： 单击展开 + 文本更改为折叠 - 所有面板，无论当前是否显示，都应折叠 单击折叠 - 所有面板，无论当前是否正在显示，都应该显示。

function travelAccordion() {

  var x = document.getElementById("travelClick");
  if (x.innerHTML === "Expand All +") {
    x.innerHTML = "Collapse All -";
    $('#travel-accordion .collapse').collapse('show');
  } else {
    x.innerHTML = "Expand All +";
    $('#travel-accordion .collapse').collapse('hide');
  }
}

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

<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" style="">
      <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" style="">
      <div class="panel-body">
        Group 2 Text
      </div>
    </div>
  </div>
</div>

Answer 1

我将在星展银行评论的基础上发布正式答案。 “#travelClick”元素的 html 内容中的空格导致了该问题。使用 HTML 内容选择器可能不可靠，您应该使用类或数据属性来跟踪手风琴的状态。

这是一个例子：

function travelAccordion() {
  var x = $("#travelClick");
  var isExpanded = x.data("expanded"); // Get the current state

  if (isExpanded) {
    x.html("Expand All +");
    $('#travel-accordion .collapse').collapse('hide');
  } else {
    x.html("Collapse All -");
    $('#travel-accordion .collapse').collapse('show');
  }

  x.data("expanded", !isExpanded); // Toggle the state
}

// Initial setup
$(document).ready(function() {
  $("#travelClick").data("expanded", false); // Set initial state
});

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

<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" style="">
      <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" style="">
      <div class="panel-body">
        Group 2 Text
      </div>
    </div>
  </div>
</div>