单选按钮（复选框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在标记中的单选按钮后直接关注。

  

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

了解如何根据现有规则正确使用标记！

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

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

不要只是复制“hacks”你不明白 - 它几乎总会在某些时候产生不良后果，你将无法预见和b）修复。请阅读此答案，阅读我发布的链接背后的内容，并了解您正在做的事情。