如何用jQuery实现点击<a>切换后续<div>显隐及文本与背景图标翻转

可以通过原生JavaScript结合CSS类来实现这个交互，逻辑清晰且易于维护：

步骤1：定义CSS隐藏类（推荐） #

先写一个控制元素隐藏的CSS类，把样式和行为分离：

.hidden {
  display: none;
}

步骤2：编写JavaScript交互逻辑 #

直接获取目标元素，绑定点击事件实现切换：

// 获取切换按钮和目标区域
const toggleBtn = document.querySelector('.header-title');
const designField = toggleBtn.nextElementSibling;

// 绑定点击事件
toggleBtn.addEventListener('click', function() {
  // 切换目标区域的隐藏类
  designField.classList.toggle('hidden');
  // 根据区域状态切换按钮文本
  this.textContent = designField.classList.contains('hidden') ? 'Show design' : 'Hide design';
});

初始状态调整（按需设置） #

如果希望页面加载时field-design默认隐藏，只需给它加上hidden类，同时把按钮文本改成Show design：

<div class="wrapper">
  <a class="header-title" style="
    background-image: url(/path);
    background-position: right;
    height: 20px;
    background-repeat: no-repeat;
    padding-right: 25px;">
Show design</a>
  <div class="field-design hidden">这里是设计内容</div>
</div>

原理说明 #

• classList.toggle('hidden')：自动给目标元素添加/移除hidden类，完成显示/隐藏的切换
• 通过contains('hidden')判断当前区域状态，动态修改按钮文本

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