我的代碼一般工作正常，但有一個(gè)小問題。每次我想切換一個(gè)特定玩家的盒子時(shí)，盒子就會(huì)展開(就像它應(yīng)該的那樣)，但是與我切換的盒子在同一行的其他玩家的盒子也會(huì)展開。有什么辦法可以防止這種情況發(fā)生？

const arsenal = {
    name: 'Arsenal',
    city: 'London',
    startingLineup: {
        gk: {name:'Aaron Ramsdale', age: 24, country:'England', img:'img/ramsdale.png'},
        lb: {name:'Oleksandr Zinchenko', age: 26, country:'Ukraine', img: 'img/zinchenko.jpg'},
        rb: {name:'Ben White', age: 25, country:'England', img: 'img/white.png'},
        lcb: {name:'Gabriel Magalhaes', age: 25, country:'Brazil',img: 'img/gabriel.png'},
        rcb: {name: 'William Saliba', age: 22, country:'France', img: 'img/saliba.png'},
        cdm: {name:'Thomas Partey',age: 29,country:'Ghana', img: 'img/partey.png'},
        cm: {name:'Granit Xhaka',age:30,country:'Switzerland',img: 'img/xhaka face.png'},
        cam: {name:'Martin Odegaard',age:23,country:'Norway',img: 'img/odegaard.png'},
        lw: {name:'Gabriel Martinelli',age:21, country:'Brazil',img: 'img/martinelli.png'},
        rw: {name:'Bukayo Saka',age:21,country:'England',img:'img/saka.png'},
        st: {name:'Gabriel Jesus',age:26,country:'Brazil', img: 'img/jesus.png'}
    }
}

let container = document.querySelector(".container")

Object.entries(arsenal.startingLineup).forEach(([key,value]) => {
    let player = document.createElement("div")
    let playerData = document.createElement("div")

    let image = document.createElement("img")
    let name = document.createElement("h3")
    let age = document.createElement("h3")
    let country = document.createElement("h3")

    image.src = value.img
    let nameNode = document.createTextNode(value.name)
    let ageNode = document.createTextNode(value.age)
    let countryNode = document.createTextNode(value.country)

    name.appendChild(nameNode)
    age.appendChild(ageNode)
    country.appendChild(countryNode)

    image.classList.add("image")
    name.classList.add("h3")
    age.classList.add("h3")
    country.classList.add("h3")

    playerData.append(name, age, country)
    player.append(image, playerData)

    playerData.classList.add("playerData")
    player.classList.add("player")

    container.appendChild(player)

    player.addEventListener("click",() => {
        player.classList.toggle("active")
    })
})

let title = document.querySelector("h1")
title.innerHTML = arsenal.name

* {
  margin: 0;
  padding: 0
}

body {
  background-color: rgb(203, 17, 17);
  font-family: arial;
}

.container {
  background-color: aquamarine transparent;
  width: fit-content;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto;
}

.player {
  background-color: rgb(168, 21, 21);
  width: fit-content;
  box-shadow: 0px 2px 3px 4px rgba(255, 255, 255, .5);
  border-radius: 10px;
  margin: 20px;
}

.player img {
  width: 200px;
  height: 200px;
  padding: 5px
}

.playerData {
  display: none;
  max-height: 0;
}

.player.active .playerData {
  background-color: rgb(118, 11, 11);
  padding: 5px;
  border-radius: 0px 0px 10px 10px;
  max-height: 200px;
  display: block;
}

h3 {
  color: white
}

<h1>Hello World</h1>
<div class="container">
  <!--<div class="player">
        <img class="image" src="img/jesus.png">
        <div class="playerData">
            <h3 class="name">Gabriel Jesus</h3>
            <h3 class="age">25</h3>
            <h3 class="country">Brazil</h3>
        </div>
    </div>-->
</div>

要點(diǎn)是使用grid時(shí)，子元素會(huì)擴(kuò)展到所有可用的高度。為了防止您的卡片擴(kuò)展到所有高度，您可以將它們包裝在另一個(gè)div中，如下所示:

const arsenal = {
    name: 'Arsenal',
    city: 'London',
    startingLineup: {
        gk: {name:'Aaron Ramsdale', age: 24, country:'England', img:'img/ramsdale.png'},
        lb: {name:'Oleksandr Zinchenko', age: 26, country:'Ukraine', img: 'img/zinchenko.jpg'},
        rb: {name:'Ben White', age: 25, country:'England', img: 'img/white.png'},
        lcb: {name:'Gabriel Magalhaes', age: 25, country:'Brazil',img: 'img/gabriel.png'},
        rcb: {name: 'William Saliba', age: 22, country:'France', img: 'img/saliba.png'},
        cdm: {name:'Thomas Partey',age: 29,country:'Ghana', img: 'img/partey.png'},
        cm: {name:'Granit Xhaka',age:30,country:'Switzerland',img: 'img/xhaka face.png'},
        cam: {name:'Martin Odegaard',age:23,country:'Norway',img: 'img/odegaard.png'},
        lw: {name:'Gabriel Martinelli',age:21, country:'Brazil',img: 'img/martinelli.png'},
        rw: {name:'Bukayo Saka',age:21,country:'England',img:'img/saka.png'},
        st: {name:'Gabriel Jesus',age:26,country:'Brazil', img: 'img/jesus.png'}
    }
}

let container = document.querySelector(".container")

Object.entries(arsenal.startingLineup).forEach(([key, value]) => {
  let wrapper = document.createElement("div")
  let player = document.createElement("div")
  let playerData = document.createElement("div")

  let image = document.createElement("img")
  let name = document.createElement("h3")
  let age = document.createElement("h3")
  let country = document.createElement("h3")

  image.src = value.img
  let nameNode = document.createTextNode(value.name)
  let ageNode = document.createTextNode(value.age)
  let countryNode = document.createTextNode(value.country)

  name.appendChild(nameNode)
  age.appendChild(ageNode)
  country.appendChild(countryNode)

  image.classList.add("image")
  name.classList.add("h3")
  age.classList.add("h3")
  country.classList.add("h3")

  playerData.append(name, age, country)
  player.append(image, playerData)
  wrapper.append(player)

  playerData.classList.add("playerData")
  player.classList.add("player")
  wrapper.classList.add("wrapper")

  container.appendChild(wrapper)

  player.addEventListener("click", () => {
    player.classList.toggle("active")
  })
})

let title = document.querySelector("h1")
title.innerHTML = arsenal.name

* {
  margin: 0;
  padding: 0
}

body {
  background-color: rgb(203, 17, 17);
  font-family: arial;
}

.container {
  background-color: aquamarine transparent;
  width: fit-content;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto;
}

.player {
  background-color: rgb(168, 21, 21);
  width: fit-content;
  box-shadow: 0px 2px 3px 4px rgba(255, 255, 255, .5);
  border-radius: 10px;
  margin: 20px;
}

.player img {
  width: 200px;
  height: 200px;
  padding: 5px
}

.playerData {
  display: none;
  max-height: 0;
}

.player.active .playerData {
  background-color: rgb(118, 11, 11);
  padding: 5px;
  border-radius: 0px 0px 10px 10px;
  max-height: 200px;
  display: block;
}

h3 {
  color: white
}

<h1>Hello World</h1>
<div class="container">
  <!--<div class="player">
    <img class="image" src="img/jesus.png">
    <div class="playerData">
      <h3 class="name">Gabriel Jesus</h3>
      <h3 class="age">25</h3>
      <h3 class="country">Brazil</h3>
    </div>
  </div>-->
</div>