javascript - 单击以展开和折叠多张卡片中的功能

Question

我是新来的，因为我刚学了一些 javascript。

我正在尝试创建一个带有描述的卡片列表，并且我想为网页上的每张卡片添加单击以展开功能。

我编写了一个代码来扩展高度并根据需要切换一些类，但我面临的问题是我创建了一个名为“full”的变量，它的初始值为 false，当我单击按钮展开卡片的值更改为 true，当我单击按钮折叠时，其值重新分配为 false。一张卡可以正常工作，但我需要至少 10 张卡才能执行相同的功能。每个 div 都分配了一个不同的 id。

主要问题是，由于不同的展开按钮有一个共同的功能来改变我的“完整”变量的值，而另一个按钮则错过了它。

var full = false;
function expand(id) {
  if (full === false) {
    document.getElementById(id + "d").style.height = "fit-content";
    document.getElementById(id).innerHTML = "Collapse";
    full = true;
  } else {
    document.getElementById(id + "d").style.height = "150px";
    document.getElementById(id).innerHTML = "Expand";
    full = false;
  }
}

:root {
    --star-size: 25px;
    --star-color: #fff;
    --star-background: #fc0;
  }
  
  .Stars {
    --percent: calc(var(--rating) / 5 * 100%);
    
    display: inline-block;
    font-size: var(--star-size);
    font-family: Times;
    line-height: 1;
    padding-left: 7px;
  }
    .Stars::before {
      content: '★★★★★';
      letter-spacing: 3px;
      background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .main{
      display: grid;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
      width: 70%;
      margin-top: 25px;
      border-radius: 9px;
      
}

.main:hover{
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

  body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color:#F2F2F3;
    align-items: center;
    margin: 20px;
  }

  .card{
      display: flex;
      /* align-items: center; */
      background-color: white;
      justify-content: space-between;
      padding: 25px;
      border-bottom-left-radius: 9px;
      border-bottom-right-radius: 9px;
      border-left: 2px black solid;
      }

      .desc{
        width: 70%;
      }

  .card .thumb{
    width: 150px;
    padding: 10px 0px;
  }

  .card .button{
    padding-left: 30px;
  }

  .rating{
      display: flex;
      flex-direction: row;
      align-items: center;
      /* justify-content: space-between; */
      height: 40px;
      
  }

  .rating p{
    padding-right: 17px;
  }

  .top-bar{
      display: flex;
      justify-content: space-between;
      border-left: 2px black solid;
      
      background-color: #ffffff;
background-image: linear-gradient(30deg, #F9FAFC 0%, #f0f0f0 74%);
      border-top-left-radius: 9px;
      border-top-right-radius: 9px;
      align-items: center;
      padding-left: 5px;
  }

  button{
  background-color: black;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  border-radius: 3px;;
  width: -webkit-fill-available;
  }

  .left{
    display: flex;
    margin-right: 30px;
    flex-direction: column;
    align-items: center;
  }

  .shrink{
    width: 70%;
    height: 150px;
    overflow: hidden;
  }

  .shrink div ::after{
    content: "";
    background-color: red;
  }

  .read-more{
    display: block;
    text-align: center;
    margin-top: -25px;
    border-radius: 9px;
    cursor: pointer;
  }

    <div class="main">
        <div class="top-bar">
           <div><h2>1. First App</h2></div>
            <div class="rating">
            <p>Rating:</p>
            <div class="Stars" style="--rating: 2.5;" aria-label="Rating of this product is 2.5 out of 5."></div>
            <p>2.5/5 Stars</p>
        </div>
        </div>
        <div class="card" id="1c">
        <div class="left"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/Spark_App_Logo.svg/1024px-Spark_App_Logo.svg.png" class="thumb">
            <button>Download App</button></div>
        <div class="shrink" id="1d">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt atque recusandae consectetur ipsum aut eos molestiae odio doloremque suscipit, minima illum quis! Possimus quo dolorum accusantium mollitia consequuntur dolorem culpa sapiente sunt libero error a delectus adipisci non quis deleniti, neque modi assumenda quibusdam laudantium doloremque expedita aut nostrum nulla! Temporibus eius voluptate atque perspiciatis nihil consequatur praesentium ipsa quasi? Quis, labore? Ad quam hic nobis architecto, nisi debitis! Adipisci voluptates nemo est nam corporis nostrum aut ut expedita, iusto error commodi fugit sed earum aspernatur quidem blanditiis quos eos repudiandae? Quos, totam aliquid, sint voluptatibus veniam nostrum voluptates consequuntur voluptatum recusandae temporibus cumque quibusdam nesciunt expedita. Dolor et esse modi quas aliquam eos natus laudantium harum atque, repellat eum quo animi fuga aliquid necessitatibus blanditiis quasi at autem culpa unde, placeat commodi! Eos iusto consequuntur maxime delectus voluptates accusamus, debitis, eveniet doloremque eligendi officia, obcaecati minima perferendis illum laboriosam vitae! Porro, nulla blanditiis assumenda illo tenetur, excepturi neque voluptate culpa ducimus esse amet dolor error corporis tempore eum ut molestias similique consequuntur, iste aut? Vero doloremque dolores iure voluptatem, reprehenderit sequi, sapiente atque quia iste ab quis, ipsa voluptates quaerat officia accusantium quae voluptas nisi esse. Sequi, libero? Nulla explicabo eligendi aliquam totam ea repudiandae adipisci illo, officiis obcaecati dolorem dolores nobis laboriosam tempora odio incidunt at illum facilis dolor reprehenderit non magni suscipit? Nulla ut quibusdam modi, veniam illum a mollitia tenetur. Recusandae adipisci consectetur repudiandae ipsam officiis quam libero amet reprehenderit distinctio animi beatae laudantium non nobis accusamus asperiores, ut modi tempora facere voluptas voluptatum iusto facilis corrupti. Deleniti saepe vero autem non delectus praesentium ex dolor pariatur doloremque, aliquid incidunt vel voluptatem consequatur in. Similique vel excepturi nihil et commodi fugiat debitis maiores laboriosam, vitae voluptate, culpa rem dignissimos tenetur? Beatae eos cum facilis sapiente dolorem.
        </div>
        </div>
         <div id="1" class="read-more" onclick="expand(this.id)">Expand</div>
    </div>

    <div class="main">
        <div class="top-bar">
           <div><h2>2. Second App</h2></div>
            <div class="rating">
            <p>Rating:</p>
            <div class="Stars" style="--rating: 3.5;" aria-label="Rating of this product is 2.3 out of 5."></div>
            <p>3.5/5 Stars</p>
        </div>
        </div>
        <div class="card" id="2c">
        <div class="left"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/Spark_App_Logo.svg/1024px-Spark_App_Logo.svg.png" class="thumb">
            <button>Download App</button></div>
        <div class="shrink" id="2d">
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam unde quo voluptatibus! Repellat, tempora? Eligendi impedit labore odio illo numquam! Quas hic quasi aut cumque unde culpa sint eveniet. Cupiditate aperiam sint similique quia facere exercitationem hic labore magni expedita iure assumenda nostrum laborum ratione soluta earum voluptas optio vel in illum, inventore saepe corrupti ipsam repudiandae consectetur. Eaque magnam non facere corporis iste, excepturi veniam accusantium tenetur? Harum itaque qui quas temporibus aut cupiditate veniam aperiam cum pariatur? Vitae harum temporibus doloremque voluptate impedit blanditiis, eius at. Molestiae, ipsa alias? Delectus ipsam quod ab quis esse saepe cupiditate ad doloribus culpa debitis illo repellendus, explicabo quidem quas eligendi, reprehenderit omnis dignissimos nulla reiciendis! Nemo consequuntur facilis debitis quas molestias at necessitatibus soluta laudantium eum. Temporibus inventore adipisci unde commodi non quisquam dolores officiis rem, vel ut! Eius quidem molestias ipsa reiciendis distinctio quod amet cumque quis nisi atque nulla doloremque iusto nesciunt ipsum dolorum, tempora quam, incidunt consequatur. Minima eius perferendis at? Minus, aspernatur ducimus? Neque ex modi nesciunt illo? Distinctio nam molestiae aspernatur facere eum libero modi quibusdam labore adipisci amet fugiat consequatur, cum sequi? Quasi voluptatem similique in alias ducimus sed, totam aperiam fuga facilis officiis temporibus culpa ab? Cumque facere vitae recusandae voluptatibus cum. Numquam iste soluta molestiae quisquam blanditiis atque nostrum ea sint delectus a quasi excepturi nemo necessitatibus nobis itaque, voluptate, non eveniet pariatur sapiente, minima reprehenderit quam ipsa rerum officiis. Facere quibusdam eos ut? Quae obcaecati fuga, quia, illum iure necessitatibus eos quasi ullam a placeat modi, tempora aperiam unde illo sed repellat nobis! Eius aut, blanditiis dicta earum minima rem officiis autem cupiditate et dolor commodi aliquam, vitae laboriosam. Iste nam iusto consequatur quam, sunt, ad perspiciatis dolore ex expedita alias incidunt quo esse corrupti, similique voluptatem. Qui saepe vitae esse commodi.
        </div>
        </div>
         <div id="2" class="read-more" onclick="expand(this.id)">Expand</div>
    </div>

我认为这种功能可以在 jQuery 中实现，但由于我是新手，我想在 JS 中实现。

标签： javascripthtmljquerycss

Answer 1

Since you are relaying on the Collapse and Expand innerHTML values, I'm making my own work around here. When the current innerHTML value corresponding yo that Id is Expand, on clicking on the same, the action must me Collapse and viseversa.

Edit: If the innerHTML is just for a demonstration, you could add a custom attribute to that html element say nodeStatus, and toggle the elements accordingly. Please check the solution below

function expand(id) {
  var isCollapsed = document.getElementById(id).nodeStatus === "Collapse";
  if (!isCollapsed) {
    // If not collapsed, then collapse it
    document.getElementById(id + "d").style.height = "fit-content";
    document.getElementById(id).nodeStatus = "Collapse";
    document.getElementById(id).innerHTML = "Collapse";
  } else {
    // If already collapsed, then expand it
    document.getElementById(id + "d").style.height = "150px";
    document.getElementById(id).nodeStatus = "Expand";
    document.getElementById(id).innerHTML = "Expand";
  }
}

:root {
    --star-size: 25px;
    --star-color: #fff;
    --star-background: #fc0;
  }
  
  .Stars {
    --percent: calc(var(--rating) / 5 * 100%);
    
    display: inline-block;
    font-size: var(--star-size);
    font-family: Times;
    line-height: 1;
    padding-left: 7px;
  }
    .Stars::before {
      content: '★★★★★';
      letter-spacing: 3px;
      background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .main{
      display: grid;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
      width: 70%;
      margin-top: 25px;
      border-radius: 9px;
      
}

.main:hover{
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

  body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color:#F2F2F3;
    align-items: center;
    margin: 20px;
  }

  .card{
      display: flex;
      /* align-items: center; */
      background-color: white;
      justify-content: space-between;
      padding: 25px;
      border-bottom-left-radius: 9px;
      border-bottom-right-radius: 9px;
      border-left: 2px black solid;
      }

      .desc{
        width: 70%;
      }

  .card .thumb{
    width: 150px;
    padding: 10px 0px;
  }

  .card .button{
    padding-left: 30px;
  }

  .rating{
      display: flex;
      flex-direction: row;
      align-items: center;
      /* justify-content: space-between; */
      height: 40px;
      
  }

  .rating p{
    padding-right: 17px;
  }

  .top-bar{
      display: flex;
      justify-content: space-between;
      border-left: 2px black solid;
      
      background-color: #ffffff;
background-image: linear-gradient(30deg, #F9FAFC 0%, #f0f0f0 74%);
      border-top-left-radius: 9px;
      border-top-right-radius: 9px;
      align-items: center;
      padding-left: 5px;
  }

  button{
  background-color: black;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  border-radius: 3px;;
  width: -webkit-fill-available;
  }

  .left{
    display: flex;
    margin-right: 30px;
    flex-direction: column;
    align-items: center;
  }

  .shrink{
    width: 70%;
    height: 150px;
    overflow: hidden;
  }

  .shrink div ::after{
    content: "";
    background-color: red;
  }

  .read-more{
    display: block;
    text-align: center;
    margin-top: -25px;
    border-radius: 9px;
    cursor: pointer;
  }

    <div class="main">
        <div class="top-bar">
           <div><h2>1. First App</h2></div>
            <div class="rating">
            <p>Rating:</p>
            <div class="Stars" style="--rating: 2.5;" aria-label="Rating of this product is 2.5 out of 5."></div>
            <p>2.5/5 Stars</p>
        </div>
        </div>
        <div class="card" id="1c">
        <div class="left"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/Spark_App_Logo.svg/1024px-Spark_App_Logo.svg.png" class="thumb">
            <button>Download App</button></div>
        <div class="shrink" id="1d">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt atque recusandae consectetur ipsum aut eos molestiae odio doloremque suscipit, minima illum quis! Possimus quo dolorum accusantium mollitia consequuntur dolorem culpa sapiente sunt libero error a delectus adipisci non quis deleniti, neque modi assumenda quibusdam laudantium doloremque expedita aut nostrum nulla! Temporibus eius voluptate atque perspiciatis nihil consequatur praesentium ipsa quasi? Quis, labore? Ad quam hic nobis architecto, nisi debitis! Adipisci voluptates nemo est nam corporis nostrum aut ut expedita, iusto error commodi fugit sed earum aspernatur quidem blanditiis quos eos repudiandae? Quos, totam aliquid, sint voluptatibus veniam nostrum voluptates consequuntur voluptatum recusandae temporibus cumque quibusdam nesciunt expedita. Dolor et esse modi quas aliquam eos natus laudantium harum atque, repellat eum quo animi fuga aliquid necessitatibus blanditiis quasi at autem culpa unde, placeat commodi! Eos iusto consequuntur maxime delectus voluptates accusamus, debitis, eveniet doloremque eligendi officia, obcaecati minima perferendis illum laboriosam vitae! Porro, nulla blanditiis assumenda illo tenetur, excepturi neque voluptate culpa ducimus esse amet dolor error corporis tempore eum ut molestias similique consequuntur, iste aut? Vero doloremque dolores iure voluptatem, reprehenderit sequi, sapiente atque quia iste ab quis, ipsa voluptates quaerat officia accusantium quae voluptas nisi esse. Sequi, libero? Nulla explicabo eligendi aliquam totam ea repudiandae adipisci illo, officiis obcaecati dolorem dolores nobis laboriosam tempora odio incidunt at illum facilis dolor reprehenderit non magni suscipit? Nulla ut quibusdam modi, veniam illum a mollitia tenetur. Recusandae adipisci consectetur repudiandae ipsam officiis quam libero amet reprehenderit distinctio animi beatae laudantium non nobis accusamus asperiores, ut modi tempora facere voluptas voluptatum iusto facilis corrupti. Deleniti saepe vero autem non delectus praesentium ex dolor pariatur doloremque, aliquid incidunt vel voluptatem consequatur in. Similique vel excepturi nihil et commodi fugiat debitis maiores laboriosam, vitae voluptate, culpa rem dignissimos tenetur? Beatae eos cum facilis sapiente dolorem.
        </div>
        </div>
         <div id="1" class="read-more" onclick="expand(this.id)">Expand</div>
    </div>

    <div class="main">
        <div class="top-bar">
           <div><h2>2. Second App</h2></div>
            <div class="rating">
            <p>Rating:</p>
            <div class="Stars" style="--rating: 3.5;" aria-label="Rating of this product is 2.3 out of 5."></div>
            <p>3.5/5 Stars</p>
        </div>
        </div>
        <div class="card" id="2c">
        <div class="left"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/Spark_App_Logo.svg/1024px-Spark_App_Logo.svg.png" class="thumb">
            <button>Download App</button></div>
        <div class="shrink" id="2d">
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam unde quo voluptatibus! Repellat, tempora? Eligendi impedit labore odio illo numquam! Quas hic quasi aut cumque unde culpa sint eveniet. Cupiditate aperiam sint similique quia facere exercitationem hic labore magni expedita iure assumenda nostrum laborum ratione soluta earum voluptas optio vel in illum, inventore saepe corrupti ipsam repudiandae consectetur. Eaque magnam non facere corporis iste, excepturi veniam accusantium tenetur? Harum itaque qui quas temporibus aut cupiditate veniam aperiam cum pariatur? Vitae harum temporibus doloremque voluptate impedit blanditiis, eius at. Molestiae, ipsa alias? Delectus ipsam quod ab quis esse saepe cupiditate ad doloribus culpa debitis illo repellendus, explicabo quidem quas eligendi, reprehenderit omnis dignissimos nulla reiciendis! Nemo consequuntur facilis debitis quas molestias at necessitatibus soluta laudantium eum. Temporibus inventore adipisci unde commodi non quisquam dolores officiis rem, vel ut! Eius quidem molestias ipsa reiciendis distinctio quod amet cumque quis nisi atque nulla doloremque iusto nesciunt ipsum dolorum, tempora quam, incidunt consequatur. Minima eius perferendis at? Minus, aspernatur ducimus? Neque ex modi nesciunt illo? Distinctio nam molestiae aspernatur facere eum libero modi quibusdam labore adipisci amet fugiat consequatur, cum sequi? Quasi voluptatem similique in alias ducimus sed, totam aperiam fuga facilis officiis temporibus culpa ab? Cumque facere vitae recusandae voluptatibus cum. Numquam iste soluta molestiae quisquam blanditiis atque nostrum ea sint delectus a quasi excepturi nemo necessitatibus nobis itaque, voluptate, non eveniet pariatur sapiente, minima reprehenderit quam ipsa rerum officiis. Facere quibusdam eos ut? Quae obcaecati fuga, quia, illum iure necessitatibus eos quasi ullam a placeat modi, tempora aperiam unde illo sed repellat nobis! Eius aut, blanditiis dicta earum minima rem officiis autem cupiditate et dolor commodi aliquam, vitae laboriosam. Iste nam iusto consequatur quam, sunt, ad perspiciatis dolore ex expedita alias incidunt quo esse corrupti, similique voluptatem. Qui saepe vitae esse commodi.
        </div>
        </div>
         <div id="2" class="read-more" onclick="expand(this.id)">Expand</div>
    </div>