Testimonials滑块：点击按钮扩展高度及动态显示/隐藏「查看更多」按钮问题

Hey there! Let's get your testimonials slider's dynamic "Read more" button working correctly. I’ve spotted a few key issues in your current code that are preventing it from behaving as expected—let’s walk through fixes step by step.

Key Issues in Your Original Code #

• Mismatched Selector: You used .about-bottom-text to target the text container, but your HTML uses .text—this meant your height check wasn’t targeting the right element.
• Incorrect $(this) Context: When you called $(this) after getting the height, it didn’t refer to the text container (since you weren’t in a callback for that element).
• Reversed Logic: Your code hid the button when text exceeded 250px, but your requirement is to show it when text exceeds 200px.
• Missing Base Styles: The text container didn’t have a fixed height or overflow rule, so truncation wouldn’t work even if the logic was correct.
• Invalid HTML: Your <p> tag wasn’t properly closed, which could cause unexpected rendering.

Corrected Full Code #

CSS

/* Default text container styling: fixed height + overflow hidden for truncation */
.text {
  height: 200px;
  overflow: hidden;
  /* Optional: add padding/margin to match your design */
  padding: 1rem;
}

/* Class to toggle text container to auto height (full content) */
.text.heightAuto {
  height: auto;
}

/* Hide button by default */
.readmore {
  display: none;
  margin-top: 1rem;
  /* Optional: style the button to match your design */
  color: #007bff;
  cursor: pointer;
}

/* Show button when dsb class is added */
.readmore.dsb {
  display: block;
}

HTML

<div class="text">
  <p>Your testimonial text goes here. Add enough content to test both scenarios: when text is shorter than 200px (button hides) and longer than 200px (button shows). For example: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="link">
  <a class="readmore" href="javascript:changeheight()">Read more</a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

JavaScript

$(function() {
  // Store the text container element to avoid repeated DOM queries
  const textContainer = $('.text');
  const currentHeight = textContainer.height();
  const readMoreBtn = textContainer.siblings('.link').find('.readmore');

  // Check if text height exceeds 200px: show button if yes, hide if no
  if (currentHeight > 200) {
    readMoreBtn.addClass('dsb');
  } else {
    readMoreBtn.removeClass('dsb');
  }
});

function changeheight() {
  const readMoreBtn = $('.readmore');
  const textContainer = $('.text');

  // Toggle button text and text container height
  if (readMoreBtn.text() === 'Read more') {
    readMoreBtn.text('Read less');
  } else {
    readMoreBtn.text('Read more');
  }
  textContainer.toggleClass('heightAuto');
}

What Changed & Why #

1. CSS Fixes: Added fixed height and overflow rules to .text to enable text truncation, and set up the dsb class to toggle button visibility clearly.
2. HTML Fix: Closed the <p> tag properly to ensure valid markup.
3. JavaScript Adjustments:
   • Stored DOM elements in variables to improve performance and fix the $(this) context issue.
   • Corrected the height threshold to 200px and reversed the logic to show the button when text overflows.
   • Used .siblings('.link') to correctly target the button container since it’s a sibling of the text container.
   • Cleaned up the toggle function to make it more readable.

内容的提问来源于stack exchange，提问作者Marko Krstic