我正在为一个足球名单制作一个网页。我正在进行折叠/展开，因此当您点击播放器图片时，它将展开信息/统计数据。当我点击播放器时它会扩展所有播放器，我只想让它扩展你点击的一个播放器。如果有人能帮我弄清楚CSS代码，那么当你点击一个单独的玩家时，它会扩展他们的信息，而不是所有的玩家。
这是我的代码：
body {
font-family: "Open Sans", Arial;
}
main {
background: #EEE;
width: 300px;
margin: 20px auto;
padding: 10px 0;
}
h2 {
text-align: center;
}
h3 {
text-align: center;
}
p {
text-align: center;
font-size: 13px;
}
input {
display: none;
visibility: collapse;
}
label {
display: block;
padding: 0.5em;
text-align: center;
}
label:hover {
cursor: grabbing;
color: #000;
}
.expand {
height: 0px;
overflow: hidden;
color: #FFF;
}
section {
padding: 0 20px;
}
#toggle:checked~.expand {
height: 300px;
}
#toggle:checked~label::before {
content: "-";
}
#toggle2:checked~.expand {
height: 300px;
}
#toggle2:checked~label::before {
content: "-";
}<input id="toggle" type="checkbox">
<label for="toggle"><img src="https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/148/55/202/46806932/1.0-1/46806932.jpg?t=1495555185000" width="200" height="250" alt=""/></label>
<div class="expand">
<section>
<h3>Lionel Messi</h3>
<p></p>
</section>
</div>
<input id="toggle2" type="checkbox">
<label for="toggle2"><img src="https://upload.wikimedia.org/wikipedia/commons/3/39/DK-Beshiktash_%281%29.jpg" width="200" height="250" alt=""/></label>
<div class="expand">
<section>
<h3>Other content</h3>
<p></p>
</section>
</div>
答案 0 :(得分：1)
可以<details>为你工作吗？
#player {
border: 1px solid black;
font-size: 150%;
max-width: 100px;
height: 200px;
}<div id="player">
PICTURE OF THE PLAYER
</div>
<details>
A very cool player!
</details>
有关如何设置详细信息样式的信息，您可以查看MDN。
根据我在你的问题中所读到的，我认为只用CSS进行崩溃/扩展是不可能的。我认为你需要JavaScript来更新：你是对的，只有CSS解决方案可以折叠/扩展，你可以检查StackOverflow的答案，我对你的问题发表了评论，这也是指导性帖子：http://www.cssportal.com/css3-preview/showing-and-hiding-content-with-pure-css3.php。尽管如此，除非另有需要，否则使用JavaScript似乎更容易。element.classList.toggle()这些类。
重新阅读你的问题，我发现它有什么问题。你使用的是错误的CSS selectors。当您使用input~div时，您选择的是所有 divs，前面有input。这意味着，当您点击#toggle时，您还会选择#toggle2（以及toggle3，toggle4等）的div，因为它也在之前在#toggle1的HTML中。
您应该使用input+div选择器。这样，只会选择输入后立即放置的div。因此，#toggle:checked+div.expand将只选择 div，其中“expand”类紧跟在#toggle之后（所有下一个div将不再被选中）。
但为了实现这一点，我必须在HTML输入后立即放置div。否则，他们将不会被选中。这没有任何区别，因为您的<label>代码已经引用（for="...）您输入的名称。
我更正了您的代码并发表了一些评论：
body {
font-family: "Open Sans", Arial;
}
main {
background: #EEE;
width: 300px;
margin: 20px auto;
padding: 10px 0;
}
h2 {
text-align: center;
}
h3 {
text-align: center;
}
p {
text-align: center;
font-size: 13px;
}
input {
display: none;
visibility: collapse;
}
label {
display: block;
padding: 0.5em;
text-align: center;
}
label:hover {
//cursor: grabbing;
/*doesn't it make more sense to use 'pointer'?*/
cursor: pointer;
color: #000;/*what's the point of this rule?*/
}
.expand {
height: 0px;
overflow: hidden;
//color: #FFF;
/*this 'color' rule makes your text white.
In a white background-color, you can't see
the text, because background and text are white*/
}
section {
padding: 0 20px;
}
/*old: #toggle:checked~.expand {
I changed all "~" for "+" below:*/
#toggle:checked+.expand {
height: 300px;
}
#toggle:checked+label::before {
content: "-";/*this here adds an "-" before
the element. What's the point of this? I think you should get rid of these ::before selectors*/
}
#toggle2:checked+.expand {
height: 300px;
}
#toggle2:checked+label::before {
content: "-";
}<!-- old: <input id="toggle" type="checkbox"> , I moved it below -->
<label for="toggle"><img src="https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/148/55/202/46806932/1.0-1/46806932.jpg?t=1495555185000" width="200" height="250" alt=""/></label>
<input id="toggle" type="checkbox">
<div class="expand">
<section>
<h3>Lionel Messi</h3>
<p>A brief description of whatever</p>
</section>
</div>
<!-- old: <input id="toggle2" type="checkbox"> , I moved it below -->
<label for="toggle2"><img src="https://upload.wikimedia.org/wikipedia/commons/3/39/DK-Beshiktash_%281%29.jpg" width="200" height="250" alt=""/></label>
<input id="toggle2" type="checkbox">
<div class="expand">
<section>
<h3>Other content</h3>
<p>Another paragraph</p>
</section>
</div>
更好的代码是：
.expand {
/*erase the 'height' and 'overflow' rules*/
display: none;
}
#toggle:checked+.expand {
display: initial;
}
请记住，客户端的屏幕大小可能会有所不同（也可以考虑移动设备），浏览器窗口也是如此。如果Flexbox到达屏幕的末尾，它将使您的内容换行。但是如果你想要一个固定的4x4格式，你可以将CSS设置为flex-wrap: nowrap;，将4个flexbox放在一起，或者甚至更好，使用CSS grid。有很多关于如何做的教程，但是你需要一些时间来掌握它。
以下是我对wrap有效的弹性箱的建议：
（运行此代码段时，单击“整页”并调整浏览器窗口大小以查看我在说什么）
.flex-container {
display:flex;
flex-wrap: wrap;
background-color: #ccc;
justify-content: space-around;
}
.flex-container>div {
background-color: #333;
color: white;
width: 200px;
height: 200px;
margin: 20px;
text-align: center;
}<div class="flex-container">
<div>player1</div>
<div>player2</div>
<div>player3</div>
<div>player4</div>
<div>player5</div>
<div>player6</div>
<div>player7</div>
<div>player8</div>
<div>player1</div>
<div>player2</div>
<div>player3</div>
<div>player4</div>
<div>player5</div>
<div>player6</div>
<div>player7</div>
<div>player8</div>
</div>
如果答案过于冗长，我很抱歉，因为你告诉我你开始编码，所以我试着非常清楚。请告诉我是否有任何不清楚的地方。
答案 1 :(得分：0)
这样的东西？
var checkboxes = document.querySelectorAll('input[type=checkbox]');
for (var i = 0; i < checkboxes.length; i++) {
console.log('iran');
checkboxes[i].addEventListener("change", checkboxFunction);
}
//document.querySelector(".expand > section > h3").innerHTML = "Nothin"
function checkboxFunction(){
switch (this.id) {
case 'toggle1':
document.getElementById("toggle2").checked = false;
document.querySelector(".expand > section > h3").innerHTML = "Foo"
document.querySelector(".expand > section > p").innerHTML = "Red"
break;
case 'toggle2':
document.getElementById("toggle1").checked = false;
document.querySelector(".expand > section > h3").innerHTML = "Bar"
document.querySelector(".expand > section > p").innerHTML = "Blue"
break;
}
}<input id="toggle1" type="checkbox">
<label for="toggle1">
<img src="https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/148/55/202/46806932/1.0-1/46806932.jpg?t=1495555185000" width="40" height="45" alt=""/>
</label>
<input id="toggle2" type="checkbox">
<label for="toggle2">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/39/DK-Beshiktash_%281%29.jpg" width="40" height="45" alt=""/>
</label>
<div class="expand">
<section>
<h3>Other content</h3>
<p></p>
</section>
</div>