Question

我在CSS中使用收音机类型进行显示/隐藏。一切都很好，但当我尝试添加更多，然后显示/隐藏它们同时打开。这对我来说很有意义，因为它们具有相同的ID和名称。所以我编辑了这些，一切都不同，但是当它们在同一页面上时，它们会丢失格式，并且会出现混乱。

任何建议都表示赞赏（除非您的建议是使用js或jquery：我知道js很容易，但我真的只想使用css / html）

谢谢！

		/* showhide css */
		
input#show, input#hide {
    display:none;
}

div#paragraph {
    display:none;
}
input#show:checked ~ div#paragraph {
  display:block;
  float: left;
  padding-top:20px;
}

input#hide:checked ~ div#paragraph {
    display:none;
}

.showthis {
	float: left;
	background-color:#9b2f00;
	border-style: solid black 1px;
	color: #f2e07b; 
	padding: 5px;
	box-shadow: 3px 3px 3px black;
	text-align: center;
	width: 200px;
	font-size: 15px
}
.hidethis {
	float: right;
	background-color:#9b2f00;
	border-style: solid black 1px;
	color: #f2e07b; 
	padding: 5px;
	box-shadow: 3px 3px 3px black;
	font-size:13px;
		
		
	/* showhide css 01 */

input#show01, input#hide01 {
    display:none;
}

div#paragraph01 {
    display:none;
}
input#show01:checked ~ div#paragraph01 {
  display:block;
  float: left;
  padding-top:20px;
}

input#hide01:checked ~ div#paragraph01 {
    display:none;
}

.showthis01 {
	float: left;
	background-color:#9b2f00;
	border-style: solid black 1px;
	color: #f2e07b; 
	padding: 5px;
	box-shadow: 3px 3px 3px black;
	text-align: center;
	width: 200px;
	font-size: 15px
}
.hidethis01 {
	float: right;
	background-color:#9b2f00;
	border-style: solid black 1px;
	color: #f2e07b; 
	padding: 5px;
	box-shadow: 3px 3px 3px black;
	font-size:13px;
}

	<label for="show">
	<span class="showthis">[Show]</span></label><input type=radio id="show" name="group"/><label for="hide"><span class="hidethis">[Hide]</span></label>    
<input type=radio id="hide" name="group"/>
<div id="paragraph">
This program is free software; you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
   the Free Software Foundation; either version 2 of the License, or
   (at your option) any later version.
   
  </div>
  
<br /><br /><br /> <br />
		
<label for="show01">
	<span class="showthis01">[Show01]</span></label><input type=radio id="show01" name="group01"/><label for="hide01"><span class="hidethis01">[Hide01]</span></label>    
<input type=radio id="hide01" name="group01"/>
<div id="paragraph01">
This program is free software; you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
   the Free Software Foundation; either version 2 of the License, or
   (at your option) any later version.
   
  </div>

Answer 1

我们的想法是使用下一个选择器+来显示/隐藏单个项目，并为所有人使用兄弟~。

DEMO： http://jsfiddle.net/qjsmm6eq/3/

HTML

<label for="all">show all</label>
<input type="radio" name="radio" class="showall"/>

<label for="all">hide all</label>
<input type="radio" name="radio" class="hideall" />

<br/><br/><br/><br/>

<label for="a">show/hide</label>
<input type="radio" name="radio" class="single" />
<div class="content">a</div>

<br/><br/>

<label for="b">show/hide</label>
<input type="radio" name="radio" class="single" />
<div class="content">b</div>

CSS

.content {
    visibility: hidden;
    color: red;
}

.single:checked + .content {
    visibility: visible;
}

.showall:checked ~ .content {
    visibility: visible;
}

.hideall:checked ~ .content {
    visibility: hidden;
}

编辑：此处可以使用复选框解决方案http://jsfiddle.net/qjsmm6eq/

编辑2：更改回radio，在两个按钮上显示/隐藏所有按钮，一个用于单个项目，这是我现在能做的最好的。

Answer 2

我遵循了sdcr的想法（非常感谢！）并使用了复选框：它们效果很好，所以即使不是一个正确的答案，因为我的原始问题不同，我仍然粘贴代码：

/* Showhide CSS only */	
	
/* function */

label {
  cursor: pointer;
}
#showhide {
  display: none; /* hide the checkbox */
}
#paragraph {
  display: none;
}
#showhide:checked + #paragraph {
  display: block;
}

/* Showhide CSS only 02*/	
label {
  cursor: pointer;
}
#showhide01 {
  display: none; /* hide the checkbox */
}
#paragraph01 {
  display: none;
}
#showhide01:checked + #paragraph01 {
  display: block;
}

	<label for="showhide"><span class="title">I am the first</span></label>
<input type="checkbox" id="showhide"/>
<div id="paragraph">
  original text
</div>	
<br /> <br />

	<label for="showhide01"><span class="title">I am the second</span></label>
<input type="checkbox" id="showhide01"/>
<div id="paragraph01">
  secondary text
</div>

多个CSS电台节目隐藏在同一页面上

2 个答案: