為什么鏈接顯示更多/更少同時打開

Question

簡而言之，我有 3 個鏈接顯示更多/更少，當我單擊其中一個顯示內容時，所有其他內容都會打開。 單擊鏈接時，我需要分別打開每個內容。

 $(".o-block-global__wysiwyg").addClass("show-more-height"); $('.btn--link').on("click", function(e) { e.preventDefault(); if ($(this).parent().prev($(".o-block-global__wysiwyg")).hasClass("show-more-height")) { $(this).text("Afficher moins"); } else { $(this).text("Afficher plus"); } $(".o-block-global__wysiwyg").toggleClass("show-more-height"); });

 // reduce content height.o-block-global__wysiwyg { &.show-more-height { height: 5rem; overflow: hidden; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="o-block-global__wysiwyg wysiwyg"> <ul> <li>Lorem ipsum</li> <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel quasi libero labore aut minima laborum illo aliquid quidem doloremque exercitationem vero praesentium harum, blanditiis quam fuga expedita ipsam, molestiae deleniti. <ul> <li>Lorem ipsum</li> <li>Lorem ipsum</li> </ul> </li> </ul> </div> <div class="o-block-global__links"> <a href="#" class="btn btn--link"> Afficher plus </a> <a href="#" target="_blank" class="btn btn--plain btn--primary external-link" title="Plain Primary (nouvelle fenêtre)"> Plain Primary <span class="icon-external-link" aria-hidden="true"></span></a> </div>

Answer 1

我沒有看到 .btn 的.btn--link以了解它在上下文中與它正在切換的元素的位置，但從其他行來看，您應該更改此行：

$(".o-block-global__wysiwyg").toggleClass("show-more-height");

至

$(this).parent().prev($(".o-block-global__wysiwyg")).toggleClass("show-more-height");

目前，它使用相同的 class 切換所有元素，而不是您要切換的元素。

代碼筆： https://codepen.io/martincarlin87/pen/QWdJbqj