展开/折叠图像 [重复]

Question

我正在为足球名单制作网页。我正在折叠/展开，所以当您单击播放器图片时，它将展开信息/统计信息。当我点击播放器时，它会展开所有播放器，我只想让它只展开你点击的一个播放器。如果有人可以帮助我找出 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>

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 时，您选择的是 all divs，前面有 input。这意味着当您单击#toggle 时，您还选择了#toggle2（以及toggle3、toggle4 等）的div，因为它在HTML 中也以#toggle1 开头。

您应该改用input+div 选择器。这样，只有在输入之后立即放置的 div 才会被选中。所以#toggle:checked+div.expand 将只选择 类为“expand”的 div，该 div 紧跟在 #toggle 之前（将不再选择所有下一个 div）。

但是为了让它工作，我必须在你的 HTML 中的输入之后立即放置 div。否则，他们将不会被选中。这没有任何区别，因为您的 <label> 标签已经引用（使用 for="...）您的输入名称。

我更正了您的代码并制作了一些 cmets：

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 格式，你可以将 4 个 flexbox 放在彼此的顶部，并将 CSS 设置为 flex-wrap: nowrap;，或者更好的是，为此使用 CSS grid。有很多关于如何做到这一点的教程，但是您需要一些时间才能掌握它。

这是我对wrapable flexbox 的建议：
（运行此代码sn-p时，点击“整页”并调整浏览器窗口大小以查看我在说什么）

.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

这样的？

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>