javascript - 用js单独展开flex对象

Question

我得到了 3 张带有一些文本的 Bootstrap 卡和一个显示更多文本的按钮。这些卡片具有 display:flex 因为它们都有不同的文本，但我希望它们具有相同的高度。在一张卡片上显示更多文字后，所有三张卡片都会展开。这完全有道理，因为它有 display:flex。但是有什么办法可以让卡片在所有卡片都关闭时具有相同的高度，并且只有一张卡片可以通过显示更多按钮展开吗？

我创建了一个 gif 以进一步显示我的问题:https://imgur.com/nM1lOn7

这是我的 js 和我的 html:

$(document).ready(function() {
  $("#toggle").click(function() {
    var elem = $("#toggle").text();
    if (elem == "Mehr Lesen") {
      $("#toggle").text("Weniger anzeigen");
      $("#text").slideDown(50);
    } else {
      $("#toggle").text("Mehr Lesen");
      $("#text").slideUp( 50);
    }
  });
});
$(document).ready(function() {
  $("#toggle1").click(function() {
    var elem = $("#toggle1").text();
    if (elem == "Mehr Lesen") {
      $("#toggle1").text("Weniger anzeigen");
      $("#text1").slideDown(50);
    } else {
      $("#toggle1").text("Mehr Lesen");
      $("#text1").slideUp( 50);
    }
  });
});
$(document).ready(function() {
  $("#toggle2").click(function() {
    var elem = $("#toggle2").text();
    if (elem == "Mehr Lesen") {
      $("#toggle2").text("Weniger anzeigen");
      $("#text2").slideDown(50);
    } else {
      $("#toggle2").text("Mehr Lesen");
      $("#text2").slideUp(50);
    }
  });
});

<div class="container-fluid">
  <h1 class="test-header">Was unsere Kunden sagen</h1>
  <h2 class="test-header2">Das Reshape your Body Konzept hat schon für so viele Menschen funktioniert, es wird auch für dich funktionieren.</h2>
  <div class="row row-padding">
    <div class="col-lg-4 card-flex mx-auto">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">Andrea<span><i class="fas fa-star stars first_star"></i><i class="fas fa-star stars"></i><i class="fas fa-star stars"></i><i class="fas fa-star stars"></i><i class="fas fa-star stars"></i></span></h4>
          <p class="card-text read-more-wrap">Mir geht es prima, bin immer statt! Das gab es noch nie bei mir und ich habe mich heut gewogen wieder eins weniger also nun 2,5 kg nach einer Woche.<br><span id="text"> Fantastisch step by
              step aber endlich funktioniert bei mir etwas, was jahrelang nicht funktioniert hat. Bin sehr zufrieden und fühl mich super. Auf geht´s in die 2. Phase</span></p>
          <button class="btn btn-secondary card-btn" id="toggle">Mehr Lesen</button>
        </div>
      </div>
    </div>
    <div class="col-lg-4 card-flex mx-auto">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">Daniel<span><i class="fas fa-star stars first_star"></i><i class="fas fa-star stars"></i><i class="fas fa-star stars"></i><i class="fas fa-star stars"></i><i class="far fa-star stars"></i></span></h4>
          <p class="card-text read-more-wrap">Ich muss wirklich sagen das ich sehr skeptisch gegenüber dem Konzept gewesen bin. Wahrscheinlich weil ich schon so viel ausprobiert hatte. Jetzt, nach 8 Wochen habe ich 9,3 Kilo auf der Waage
            runter.
            <br><span id="text1"> Ich fühle mich einfach unfassbar gut, habe nicht das geringste Bedürfnis zu naschen oder zwischen den Mahlzeiten zu Essen. Das hatte ich wirklich noch NIE!</span></p>
          <button class="btn btn-secondary card-btn" id="toggle1">Mehr Lesen</button>
        </div>
      </div>
    </div>
    <div class="col-lg-4 card-flex mx-auto">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">Monika<span><i class="fas fa-star stars first_star"></i><i class="fas fa-star stars"></i><i class="fas fa-star stars"></i><i class="fas fa-star stars"></i><i class="fas fa-star stars"></i></span></h4>
          <p class="card-text read-more-wrap">Kurze Info zu meiner Abnehm-Challenge:. Weitere 4 Wochen vorbei und es gibt wieder Gutes zu berichten. Die nächsten 4 Kilos sind verschwunden und das obwohl der ein oder andere "Schlampertag" dabei
            war.<br><span id="text2"> Das Konzept ist genial. Vor allen Dingen für diejenigen, wie ich, die zwar abnehmen wollen aber mit Sport nicht soviel am Hut haben.
            </span></p>
          <button class="btn btn-secondary card-btn" id="toggle2">Mehr Lesen</button>
        </div>
      </div>
    </div>
  </div>
</div>

我 100% 确定有更好、也许更简单的方法来编写该 js。但我是一个完全的初学者和菜鸟。

这就是为什么我会感谢各种帮助!

提前致谢!

Answer 1

只做一个功能:)

所以我们的想法是创建一个新函数，它封装了每次用户按下标题时需要执行的所有逻辑，并将其应用于您拥有的每张卡片

function subscribeOnClick(toggle, mainText, altText, slidingText){
   toggle.click(function() {
    var currentText = toggle.text();
    if (currentText === mainText) {
      toggle.text(altText);
      slidingText.slideDown(50);
    } else {
      toggle.text(mainText);
      slidingText.slideUp(50);
    }
  }); 
}

$(document).ready(function() {
  subscribeOnClick($("#toggle"), 'Mehr Lesen', 'Weniger anzeigen', $("#text"));
  subscribeOnClick($("#toggle1"), 'Mehr Lesen', 'Weniger anzeigen', $("#text1"));
  subscribeOnClick($("#toggle2"), 'Mehr Lesen', 'Weniger anzeigen', $("#text2"));
});

或者只删除文本参数，如果它们是常量的话。

如果每个逻辑完全相同。然后我建议迁移到类选择器而不是 id，就像你在示例中所做的那样，并改用 data-toggle 属性

function subscribeOnClick(){
   $('.toggle').click(function(event) {
    var elem = $(event.target);
    var slidingText = elem.prev().find('.extra-text');
    if(elem.data('expanded')) {
      toggle.text(elem.data('close-text'));
      slidingText.slideDown(50);
    } else {
      toggle.text(elem.data('open-text'));
      slidingText.slideUp(50);
    }
  }); 
}

$(document).ready(function() { subscribeOnClick() })

和 HTML

<div class="card-body">
          ...
          <p class="card-text read-more-wrap">nach ... einer Woche.<br>
             <span class="extra-text"> Fa...die 2. Phase</span>
          </p>
          <button data-show-more="Mehr Lesen" data-show-less="Weniger anzeigen" class="btn btn-secondary card-btn toggle">Mehr Lesen</button>
           ...
</div>