單擊以在多個卡片中展開和折疊功能

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>