javascript - 当浏览器调整大小时，如何根据 div 大小触发显示或隐藏操作

我正在为一个图书出版网站的作者页面设计一个摘要容器。有些作者的摘要内容较多，而有些作者的内容较少。我想在 div 容器的高度超过截止高度（180px）时动态启用/禁用“显示更多/收起”按钮。因此，需要动态控制 div 容器的高度（180px 和原始高度）。我需要一段在所有浏览器中都能完美工作的代码。

我这里有一段实现的代码：

http://jsfiddle.net/rraagghhu/9dgs6432/3/

HTML ：

<div class = "container">
<div class="info-wrapper">
<div class="info">
Chetan Bhagat is the author of six blockbuster books.These include five novels—Five Point Someone (2004), One Night @ the Call Center (2005), The 3 Mistakes of My Life (2008), 2 States (2009), 
Revolution 2020 (2011), the non-fiction title What Young India Wants (2012) and Half Girlfriend (2014). Chetan’s books have remained bestsellers since their release. 
Four out his five novels have been already adapted into successful Bollywood films and the others are in process of being adapted as well. The New York Times called him the ‘the biggest selling English language novelist in India’s history’. Time magazine named him amongst the ‘100 most influential people in the world’ and Fast Company, USA, listed him as one of the world’s ‘100 most creative people in business’. Chetan writes columns for leading English and Hindi newspapers, focusing on youth and national development issues. He is also a motivational speaker and screenplay writer. Chetan quit his international investment banking career in 2009 to devote his entire time to writing and make change happen in the country. He lives in Mumbai with his wife, Anusha, an ex-classmate from IIM-A, and his twin boys, Shyam and Ishaan. You can email him at [email  or fill in the Guestbook with your feedback. You can also follow him on twitter (@chetan_bhagat) or like his Facebook fanpage (https://www.facebook.com/chetanbhagat.fanpage).
</div>
<a href="#" class="more">(more)</a>
<a href="#" class="less">(less)</a>
</div>

<div class = "footer"> THIS IS FOOTER </div>
</div>

CSS :

.container{
    background-color: yellow;
 }
.footer{
    background-color: yellow;
 }
 .info-wrapper {
    height: auto;
    position: relative;
    width: auto;
    padding: 0 0 2.5em 0; 
    background-color: red;
 } 
 .info {

    max-height: 180px;
    height: auto;
    width: auto;
    overflow: hidden;
    position: relative; 
    text-align: justify;
}
.info:after, .aftershadow {
    bottom: 0;
    width: auto;
    height: auto;
}

.info-wrapper a {
    left: 50%;
    position: relative;
    font: 700 .67em/1.25em Arial;
    text-align: center;
    text-decoration: underline;
    cursor: pointer;
}
.less { height: auto; display: none; }
.more { display: none; } 

Jquery ：

if($(".info")[0].scrollHeight > $(".info").height()) {
        $("a.more").show();
    }

    $("a.more").click(function(e){
        e.preventDefault();
        $(".info").css({"overflow": "visible"});
        $("a.less").show();
        $("a.more").hide();
        return false;
    });

    $("a.less").click(function(e){
        e.preventDefault();
        $(".info").css({"overflow": "hidden"});
        $("a.more").show();
        $("a.less").hide();
        return false;
    });

如你所见，页脚保持在绝对位置。如果点击更多按钮，(更少) 应该下来，页脚应该显示在其下方。当浏览器缩小/扩大时，是否可以动态启用/禁用显示更多/更少按钮？

答案＃1

将 max-height 设置为 100% 以显示更多，将 max-height 设置为 180px 以显示更少。

更新的 JSFiddle

答案＃2

你不需要让 overflow 被显示，而是只需将 max-height 增加到 100%.

$("a.more").click(function(e){
    e.preventDefault();
    $(".info").css({"max-height": "100%"});
    $("a.less").show();
    $("a.more").hide();
    return false;
});

我还添加了一些内边距，这样你可以更容易地看到文字。

已更新的 fiddle

这实际上是另一个问题，但使用 innerHeight 而不是 height，你可以在窗口大小调整时检测文本是否因为内边距而溢出：

$(window).resize(function(){
    if($(".info")[0].scrollHeight > $(".info").innerHeight()) {
        $("a.more").show();
    }
});

我还将少/多按钮绝对定位在信息框的底部，以覆盖可能延伸到内边距中的任何文本：

.info-wrapper a {
        left: 0; bottom: 0;
        width: 100%;
        background: red;
        position: absolute;
        font: 700 .67em/1.25em Arial;
        text-align: center;
        text-decoration: underline;
        cursor: pointer;
        line-height: 20px;
}

完整代码在这个 fiddle 中