点击按钮切换图标与文本并实现对应功能的技术求助

先修正你现有代码的问题 #

你的jQuery代码存在几个关键错误：

• jQuery中设置元素HTML内容要用.html()方法，而非直接给html属性赋值
• 切换图标类时只添加新类、未移除旧类，会导致两个折叠图标类共存，显示异常
• 当前代码仅实现了单向切换，点击第二次无法切回原状态

正确的状态切换实现 #

可以通过判断当前按钮文本或图标类来实现双向切换，这里提供两种实用思路：

思路1：通过图标类判断状态

function hey() {
  var btn = $("#btnCollapse");
  var span = $("#iconCollapse");
  
  if (span.hasClass("glyphicon-collapse-down")) {
    // 切换为展开状态
    span.removeClass("glyphicon-collapse-down").addClass("glyphicon-collapse-up");
    btn.contents().last()[0].textContent = " Expand Views";
    // 执行折叠相关功能
    // do something when collapsing
  } else {
    // 切换为折叠状态
    span.removeClass("glyphicon-collapse-up").addClass("glyphicon-collapse-down");
    btn.contents().last()[0].textContent = " Collapse Views";
    // 执行展开相关功能
    // do something when expanding
  }
}

思路2：通过按钮文本判断状态（注意你示例里的拼写错误：Collapase → Collapse）

function hey() {
  var btn = $("#btnCollapse");
  var span = $("#iconCollapse");
  
  if (btn.text().trim().includes("Collapse")) {
    // 当前是折叠状态，切换为展开
    span.removeClass("glyphicon-collapse-down").addClass("glyphicon-collapse-up");
    btn.contents().last()[0].textContent = " Expand Views";
    // 执行折叠操作逻辑
    // do something for collapse action
  } else {
    // 当前是展开状态，切换为折叠
    span.removeClass("glyphicon-collapse-up").addClass("glyphicon-collapse-down");
    btn.contents().last()[0].textContent = " Collapse Views";
    // 执行展开操作逻辑
    // do something for expand action
  }
}

关键细节说明 #

• 用btn.contents().last()[0].textContent修改文本，是为了保留图标<span>，避免直接替换整个.html()导致图标丢失
• 用.trim()去除文本前后空格，避免空格影响判断逻辑
• 图标类切换可以用jQuery的.toggleClass()简化：span.toggleClass("glyphicon-collapse-down glyphicon-collapse-up")，无需手动判断，直接切换两个类的存在状态

完整可运行代码示例 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<button id="btnCollapse" type="button" onClick="hey()" class="btn btn-default btn-sm">
    <span id="iconCollapse" class="glyphicon glyphicon-collapse-down"></span> 
    Collapse Views 
</button>

<script>
function hey() {
  var btn = $("#btnCollapse");
  var span = $("#iconCollapse");
  
  if (btn.text().trim().includes("Collapse")) {
    span.toggleClass("glyphicon-collapse-down glyphicon-collapse-up");
    btn.contents().last()[0].textContent = " Expand Views";
    console.log("执行折叠功能");
  } else {
    span.toggleClass("glyphicon-collapse-down glyphicon-collapse-up");
    btn.contents().last()[0].textContent = " Collapse Views";
    console.log("执行展开功能");
  }
}
</script>

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