单击以在多个卡片中展开和折叠功能

Question

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

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

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

主要问题是，由于不同的扩展按钮有一个通用的 function 来更改我的“完整”变量的值，而另一个按钮却错过了它。

 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 t.netur, 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 t.netur, 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 t.netur: 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 t.netur, 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 中实现。

Answer 1

由于您要依赖Collapse和Expand innerHTML 值，因此我将在这里进行自己的工作。 当当前的innerHTML值对应的 yo 即 Id 是Expand时，点击相同的动作必须是 Collapse 和 viseversa。

编辑：如果innerHTML只是为了演示，您可以向该 html 元素添加一个自定义属性，比如nodeStatus ，并相应地切换元素。 请检查下面的解决方案

 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 t.netur, 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 t.netur, 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 t.netur: 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 t.netur, 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>