单选按钮（复选框 hack）

Question

我正在尝试使用 CSS 单选按钮 hack 来显示隐藏的 div，但我无法在单击时显示它。下面的当前代码是隐藏的，当我单击复选框时没有任何反应。我打算添加类似的框（然后隐藏它们）来显示一些轻内容的选项卡。有人可以提供一些帮助吗？

下面是html（只写了第一个框）：

<section class="panel clearfix skillsBox">
<div class="wizard wizard-vertical clearfix" id="wizard-2">
<ul class="steps">
  <li class="step changeSkill">
    <input type="radio" id="zskills"><label for="zskills"><span class="badge badge-info">1</span>Feel Activities</label>
  </li>
  <div class="reveal-if-active-skillsAll">
    <div class="step-pane step-content" id="all">
      <ul>
        <li>All activities in the Feel stage are listed below.<br> </li>
        <li>You can also click on each skill at the left to show activities that teach that specific skill.</li>
      </ul>
    </div>
  </div>
  <li class="step"><a href="javascript:void(0)" class="changeSkill" data-target="#Empathy" data-skill="Empathy"><span class="badge badge-info">2</span>Empathy</a></li>
    <div class="step-pane step-content" id="Empathy">
      <ul>
        <li>Ability to sense other people's emotions and thoughts, especially by imagining someone else's perspective in what they are thinking and feeling<br> </li>
        <li>Empathy allows you to truly understand how and why people are affected by the issues that surround them, and what solutions could truly impact the problem. </li>
      </ul>
    </div>
  <li class="step"><a href="javascript:void(0)" class="changeSkill" data-target="#Awareness" data-skill="Awareness"><span class="badge badge-info">3</span>Awareness</a></li>
    <div class="step-pane step-content" id="Awareness">
      <ul>
        <li>Ability to show a true understanding of yourself and others, by being conscious of your own thoughts and actions as well as of those around you</li>
        <li>It is important to be aware of the people, places, and things around you, in order to be conscious and fully sensitive to the problems that you and your community may be facing and what can be used to solve them. </li>
      </ul>
    </div>
  <li class="step"><a href="javascript:void(0)" class="changeSkill" data-target="#Engagement" data-skill="Engagement"><span class="badge badge-info">4</span>Engagement</a></li>
   <div class="step-pane step-content" id="Engagement">
    <ul>
      <li>Ability to be proactively, attentively, and passionately committed to tasks at hand as well as enthusiastic about interacting with the world around you, because you see how you fit into achieving an end goal. </li>
      <li>Engagement is critical for motivation - you care about interacting with your community and your team because you see how you are a part of it and how you can change it. </li>
    </ul>
  </div>
</ul>

这里是 CSS:

.reveal-if-active-skillsAll {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

input[type="radio"]:checked ~ .reveal-if-active-skillsAll {
  opacity: 1;
  max-height: 100px;
  overflow: visible;
}

Answer 1

你在做什么

您使用的是普通兄弟~ select或。在此处查找有关它的更多信息：

http://www.sitepoint.com/web-foundations/general-sibling-selector-css-selector/

为什么它不起作用

input[type="radio"]:checked ~ .reveal-if-active-skillsAll 适用于 DOM 结构，其中 .reveal-if-active-skillsAll 是单选按钮的同级。如果 .reveal-if-active-skillsAll 的父元素与单选按钮的父元素不同，无法使其工作。

一个小警告：可能会产生意想不到的副作用

此外，请注意 ~ .reveal-if-active-skillsAll 将 select 所有兄弟姐妹 .reveal-if-active-skillsAll， 不仅是下一个 .

仅select下一个，使用相邻兄弟select或+。这需要您的 .reveal-if-active-skillsAll 紧跟在标记中的单选按钮之后。

http://www.sitepoint.com/web-foundations/adjacent-sibling-selector-css-selector/

学习根据现有规则正确使用标记！

另请注意，无序列表 <ul>（以及有序列表 <ol>) 是 <li>.

如何解决 - 并避免将来出现此类问题

不要只是复制你不理解的“hacks”——它几乎总是会在某些时候产生你无法 a) 预见和 b ）使固定。因此，请阅读此答案，阅读我发布的链接背后的内容，然后了解您在做什么。

单选按钮（复选框 hack）

radio button (checkbox hack)

html

css

css-hack

radio-button

你在做什么

为什么它不起作用

一个小警告：可能会产生意想不到的副作用

学习根据现有规则正确使用标记！

如何解决 - 并避免将来出现此类问题