Question

我正在为一个足球名单制作一个网页。我正在进行折叠/展开，因此当您点击播放器图片时，它将展开信息/统计数据。当我点击播放器时它会扩展所有播放器，我只想让它扩展你点击的一个播放器。如果有人能帮我弄清楚CSS代码，那么当你点击一个单独的玩家时，它会扩展他们的信息，而不是所有的玩家。

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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来element.classList.toggle()这些类。~~更新：你是对的，只有CSS解决方案可以折叠/扩展，你可以检查StackOverflow的答案，我对你的问题发表了评论，这也是指导性帖子：http://www.cssportal.com/css3-preview/showing-and-hiding-content-with-pure-css3.php。尽管如此，除非另有需要，否则使用JavaScript似乎更容易。

重新阅读你的问题，我发现它有什么问题。你使用的是错误的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

请记住，客户端的屏幕大小可能会有所不同（也可以考虑移动设备），浏览器窗口也是如此。如果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>

如果答案过于冗长，我很抱歉，因为你告诉我你开始编码，所以我试着非常清楚。请告诉我是否有任何不清楚的地方。

Answer 2

这样的东西？

＆＃13;

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

＆＃13;

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

＆＃13;

展开/折叠图像

2 个答案:

更新：flexbox 4x4