单选按钮（复选框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

你在做什么

您正在使用通用的~选择器。 在这里找到有关它的更多信息：

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的父元素与单选按钮的父元素不同，则无法使其工作。

一个小警告：可能的意外副作用

另外，请注意~ .reveal-if-active-skillsAll将选择所有同级.reveal-if-active-skillsAll ， 而不仅仅是下一个 。

要仅选择下一个，请使用相邻的兄弟选择器 + 。 这要求您的.reveal-if-active-skillsAll必须直接在标记中的单选按钮之后执行。

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

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

还请注意， 无序列表 <ul> （以及有序列表 <ol> ）中唯一允许的直接子元素是<li> 。

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

不要仅仅复制您不理解的“ hack”-在某些时候几乎总是会产生不良后果，而您将无法a）预见到b）修复。 因此，请阅读此答案，阅读在我发布的链接后面可以找到的内容，并了解您的工作。