纯CSS实现单按钮显示/隐藏元素的可行性咨询

你的理解其实不完全正确——不用jQuery、甚至不用任何JS，只靠纯CSS+HTML就能实现单按钮切换显示/隐藏的效果，只是不能只依赖单个锚点的:target伪类（就像你当前代码里的写法），得换个更巧妙的思路。

先说说你现有代码的局限：你用#added-value-1:target来触发显示div，点击锚点后URL会带上#added-value-1，确实能显示内容，但此时锚点的href还是指向这个div，再次点击只会让页面滚动到div位置，没法触发隐藏——这是因为:target只有当元素是当前锚点目标时才生效，没有“取消目标”的机制。

推荐的纯CSS单按钮方案：隐藏Checkbox + Label #

这是目前最简洁的纯CSS切换方案，完全不需要JS，而且是真正的单按钮交互：

HTML结构调整

<div class="container">
  <h1> Container for testing purposes. Below content will show/hide upon button click </h1>
  <!-- 隐藏的checkbox作为状态开关 -->
  <input type="checkbox" id="toggle-switch" hidden>
  <!-- 用label绑定checkbox，点击label等同于点击checkbox -->
  <label for="toggle-switch" id="expand-btn-1"></label>
  <p id="added-value-1"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus maximus mattis. Nam id gravida lorem, ac egestas nunc. Proin ullamcorper gravida odio et vulputate. Quisque eleifend finibus ante, tincidunt varius nibh tristique id. In suscipit sit amet leo non vulputate. Maecenas eu tellus maximus, hendrerit augue ac, consectetur tortor. Vestibulum fringilla sapien sit amet commodo ullamcorper.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus maximus mattis. Nam id gravida lorem, ac egestas nunc. Proin ullamcorper gravida odio et vulputate. Quisque eleifend finibus ante, tincidunt varius nibh tristique id. In suscipit sit amet leo non vulputate. Maecenas eu tellus maximus, hendrerit augue ac, consectetur tortor. Vestibulum fringilla sapien sit amet commodo ullamcorper. 
  </p>
</div>

CSS样式调整

body { font-family:'Trebuchet MS', sans-serif; font-size:0.5em; text-align:center; }
.container { padding:1em; margin:0 auto; background:#efefef; }

/* 默认隐藏内容 */
#added-value-1 { display:none; }

/* 当checkbox被选中时，显示内容 */
#toggle-switch:checked ~ #added-value-1 { display:block; }

/* 按钮样式：默认显示"Expand" */
#expand-btn-1 { 
  margin:2em auto; 
  text-align:center; 
  padding:1em 2em; 
  font-weight:bold; 
  background:orange; 
  display:inline-block; 
  cursor:pointer;
}
#expand-btn-1::after { content: 'Expand'; }

/* 当checkbox被选中时，按钮文本切换为"Collapse" */
#toggle-switch:checked ~ #expand-btn-1::after { content: 'Collapse'; }

方案原理 #

• 隐藏的checkbox作为状态容器，记录“展开/收起”的状态
• label元素绑定checkbox的id，点击label就会触发checkbox的选中/取消选中状态
• 利用CSS的:checked伪类和兄弟选择器~，根据checkbox的状态控制内容的显示/隐藏，同时切换按钮上的文本

如果你坚持想用锚点的方式，也能实现，但需要两个锚点（视觉上合并成一个按钮），不过这种方式不如checkbox方案简洁，这里就不展开细说了。

总的来说，不用jQuery也能轻松实现单按钮切换显示/隐藏的效果，推荐用上面的checkbox+label方案，兼容性好且逻辑清晰。

内容的提问来源于stack exchange，提问作者Paweł Skaba