jQuery点击按钮修改元素样式后如何恢复元素原有属性

1. 现有代码的核心问题 #

• 全局唯一的count变量被所有按钮共用：比如点第一个按钮1次count变为1，再点第二个按钮count直接累加到2，会错误触发收起样式逻辑，计数完全不准
• 5个按钮的点击逻辑90%以上重复，后续加新的FAQ项还要复制粘贴代码，维护成本极高
• 直接用.css()写入内联样式时没有基于元素本身状态做判断，只能手动硬编码初始属性值，一旦调整静态CSS就要同步改JS
• toggle(0)的动画回调执行时机和同步代码执行顺序容易冲突，这也是传0时长时样式没法正确恢复的核心原因

2. 通用实现代码（全注释，无需逐个绑定id） #

首先先统一HTML结构，给同类元素加公共class，用data-*属性关联按钮和对应内容，不用写一堆独立id：

<!-- 每个FAQ项统一结构，后续新增项直接复制这个结构改内容即可 -->
<div class="faq-item">
  <!-- 按钮加统一公共class，用data-index存当前项的编号，用来匹配对应内容 -->
  <button class="faq-btn" data-index="1">
    问题1
    <span class="daunstr">↓</span>
    <span class="up-str" style="display:none">↑</span>
  </button>
  <!-- 对应隐藏内容块，加统一公共class，data-index和上方按钮对应 -->
  <div class="faq-hidden-content afterjsdiv1" data-index="1" style="display:none">
    <div class="hrdivdownS"></div>
    回答内容1
  </div>
</div>

JS逻辑全用公共选择器+this实现，自动适配任意数量的FAQ项，自动回滚原有样式：

$(document).ready(function(){
  // 给所有带faq-btn类的按钮统一绑定点击事件，不管有多少项都不用重复写逻辑
  $(".faq-btn").on("click", function(){
    // this指向当前被点击的按钮，先获取当前项的编号
    const currentIndex = $(this).data("index");
    // 找到当前按钮对应的隐藏内容块
    const $currentContent = $(`.faq-hidden-content[data-index="${currentIndex}"]`);
    // 找到当前按钮内的上下箭头元素
    const $currentUpIcon = $(this).find(".up-str");
    const $currentDownIcon = $(this).find(".daunstr");
    // 找到当前内容块里的分割线元素
    const $currentHr = $currentContent.find(".hrdivdownS");

    // 直接判断元素本身的显隐状态，不用全局count，完全不会错乱
    const isExpanded = $currentContent.is(":visible");

    if(isExpanded){
      // 当前是展开状态，点击后收起，恢复原有样式
      $currentContent.hide();
      // 核心：清空JS添加的内联样式，自动回退到CSS文件里定义的原有属性，不用手动写初始值
      $currentContent.css({
        "position": "",
        "left": ""
      });
      // 恢复箭头、分割线的初始样式
      $currentDownIcon.css("left", "40em").show();
      $currentHr.css("width", "40em");
      $currentUpIcon.hide();
    }else{
      // 当前是收起状态，点击后展开，写入展开后的样式
      $currentContent.show();
      $currentContent.css({
        "position": "relative",
        "left": "-4.9em"
      });
      // 调整箭头、分割线的展开态样式
      $currentDownIcon.css("left", "45em").hide();
      $currentHr.css("width", "44em");
      $currentUpIcon.css({
        "left": "45em",
        "top": "3em"
      }).show();
    }
  })
})

3. 关键实现说明 #

• 恢复原有CSS属性不需要手动记忆初始值：只要通过.css("属性名", "")把JS添加的内联样式对应属性清空，浏览器会自动回退到你在CSS样式表中定义的默认属性，比手动写死初始值灵活得多，后续调整静态CSS不需要同步修改JS代码
• 状态判断永远以元素本身的状态为准：不要用全局计数变量判断展开/收起，直接用jQuery的.is(":visible")方法判断当前元素的显隐状态，不管用户怎么点击都不会出现状态错乱
• 通用绑定的核心是公共类+this：不管页面加多少个FAQ项，只要套用统一结构、加对应公共class，JS代码不用改一行就能自动生效，不用给每个按钮单独写$("#btn1faq")、$("#btn2faq")这类重复逻辑
• 简单显隐切换直接用show()/hide()代替带时长的toggle()：没有动画需求时不要给toggle传时长参数，避免回调执行顺序和同步代码冲突，导致样式回滚失败

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