时间戳

首页 > 解决方案 > 为什么链接显示更多/更少同时打开

javascript - 为什么链接显示更多/更少同时打开

问题描述

简而言之，我有 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>

标签： javascripthtmljquerycss

解决方案

我没有看到 html.btn--link来知道它在上下文中它正在切换的元素的位置，但是从其他行来看，您应该更改这一行：

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

至

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

目前，它正在切换具有相同类的所有元素，而不是您想要切换的元素。

代码笔： https ://codepen.io/martincarlin87/pen/QWdJbqj

推荐阅读