单选按钮(复选框hack) [英] radio button (checkbox hack)

问题描述

我正在尝试使用CSS单选按钮hack来显示隐藏的div，但是单击时无法显示它.在下面的当前代码中，它是隐藏的，当我单击复选框时，什么也没有发生.我打算添加类似的框(以后将它们隐藏)以显示一些浅色的选项卡. 有人可以帮忙吗?

I'm trying to use the CSS radio button hack to reveal a hidden div, but I cannot get it to appear when clicked. With the current code below it is hidden, and nothing happens when I click the check box. I intend to add similar boxes (and later hide them) to display a few tabs of light content. Can someone please offer some aid?

这是html(只写了第一个方框):

Here is the html (only the first box is written):

<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;
}

推荐答案

您在做什么

您正在使用通用的同级~选择器.在此处找到有关它的更多信息:

What you are doing

You are using a general sibling ~ selector. Find more information about it here:

http://www.sitepoint.com/网络基础/通用兄弟选择器-css-选择器/

为什么不起作用

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

Why it doesn't work

input[type="radio"]:checked ~ .reveal-if-active-skillsAll works for a DOM structure where .reveal-if-active-skillsAll is a sibling of your radiobutton. There is no way to make it work if .reveal-if-active-skillsAll has a parent element different from your radio button's parent element.

此外，请注意，~ .reveal-if-active-skillsAll将选择全部兄弟姐妹.reveal-if-active-skillsAll，不仅选择下一个.

Also, please be aware that ~ .reveal-if-active-skillsAll will select all sibling .reveal-if-active-skillsAll, not only the next.

要仅选择下一个，请使用相邻的同级选择器 +.这要求您.reveal-if-active-skillsAll紧跟在标记中的单选按钮之后.

To select only the next, use the adjacent sibling selector +. This requires your .reveal-if-active-skillsAll to follow directly after your radio button in the markup.

http://www.sitepoint.com/网络基础/adjacent-sibling-selector-css-selector/

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

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

Learn to properly use markup according to the existing rules!

Please also note that the only direct child element that is allowed in an unordered list <ul> (as well as an ordered list <ol>) is <li>.

不仅仅是复制"hacks"，这是您不了解的-在某些时候您几乎无法得到预期的结果，而您将无法a)预见和b)修复.因此，请阅读此答案，阅读在我发布的链接后面可以找到的内容，并了解您正在做什么.

Don't just copy "hacks" which you do not understand - it will almost always have undesired consequences at some point which you will be unable to a) foresee and b) fix. So read this answer, read what can be found behind the links I posted, and understand what you are doing.

这篇关于单选按钮(复选框hack)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！