论坛引用Div仅在高度超过160px时显示展开/收起链接的实现方案咨询

Great question! Let's break this down for you. First off: pure CSS can't handle this on its own. CSS doesn't have a native way to compare an element's actual content height (the full height of what's inside, even if hidden) to a fixed max-height value dynamically. So we'll need to use jQuery to add that height-check logic.

Why your current code shows the link everywhere #

Right now, your .readmore-link is always present (unless overridden by other rules) because there's no check to see if the quote div's content actually overflows the 160px max-height. We need to add that conditional visibility logic.

Step-by-Step Solution #

1. Update CSS to hide the link by default
   First, make sure the expand link starts hidden so we only show it when necessary:

   .quotediv { 
       max-height: 160px; 
       transition: max-height 0.15s ease-out;
       position: relative; /* Add this to contain the absolute-positioned link */
   }
   .quotediv.expand{ 
       max-height: 5000px !important; 
       transition: max-height 0.35s ease-in-out; 
   }
   .readmore-link{ 
       position: absolute; 
       bottom: 0; 
       right: 0; 
       display: none; /* Hide by default */
       width:100%; 
       height: 20px; 
       text-align: center; 
       font-size: 14px; 
       color: #004D8A; 
       text-decoration: underline; 
       padding-top:50px; 
       background: linear-gradient(to bottom, rgba(245,245,245,0) 0%, #f5f5f5 70%); 
       cursor: pointer; 
   }
   .readmore-link.expand { 
       position: relative; 
       background-image: none; 
       padding-top:10px; 
       height:20px; 
   }
   .readmore-link:after { content:"Click to expand"; }
   .readmore-link.expand:after{ content:"remove"; }
   

   Note: We added position: relative to .quotediv to ensure the absolute-positioned link stays contained within it.

2. Add jQuery logic to check height and toggle links
   We'll create a reusable function that checks each .quotediv, compares its full content height (using scrollHeight) to 160px, and shows/hides the link accordingly. We'll run this function on page load and whenever the window resizes (to handle viewport changes that might affect the div's height):

   // Function to check quote div heights and toggle link visibility
   function checkQuoteHeights() {
       $(".quotediv").each(function() {
           const $quote = $(this);
           const $link = $quote.find(".readmore-link");
           // Check if full content height exceeds the max-height limit
           if ($quote[0].scrollHeight > 160) {
               $link.show();
           } else {
               $link.hide();
               // Reset expanded state if we hide the link
               $quote.removeClass("expand");
               $link.removeClass("expand");
           }
       });
   }
   
   $(document).ready(function() {
       // Run height check on page load
       checkQuoteHeights();
   
       // Your existing click handler for expand/collapse
       $(".readmore-link").click(function(e) {
           var isExpanded = $(e.target).hasClass("expand");
           // Close all open quotes first
           $(".quotediv.expand").removeClass("expand");
           $(".readmore-link.expand").removeClass("expand");
           // Expand target if it wasn't already expanded
           if (!isExpanded){
               $(e.target).parent(".quotediv").addClass("expand");
               $(e.target).addClass("expand");
           }
       });
   
       // Re-check heights when window resizes (handles viewport changes)
       $(window).resize(function() {
           checkQuoteHeights();
       });
   });
   

Key Details #

• scrollHeight gives us the full height of the div's content, even if it's clipped by max-height—perfect for our overflow check.
• The window resize handler ensures the link visibility updates if the user resizes their browser (which could change how much content fits in 160px).
• We reset the expanded state when hiding the link, so if the window shrinks and the div no longer needs the link, it doesn't stay expanded unnecessarily.

This setup will ensure the "Click to expand" link only appears when the quote div's content actually overflows the 160px limit.

内容的提问来源于stack exchange，提问作者Lars Vegas