Javascript 调整浏览器大小时如何基于div大小触发显示或隐藏操作

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

我在这里实现了一个代码：

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 info@chetanbhagat.com 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>

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;
    });

---

如您所见，页脚保持在绝对位置。如果单击了“更多”按钮，则（更少）应下降，其下方应为页脚。浏览器收缩/展开时是否可以动态启用/禁用“显示更多/更少”按钮？

将“显示更多”的

最大高度设置为
100%
，将“显示更少”的
最大高度设置为
180px

您不需要显示
溢出
，只需将
最大高度增加到100%

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

我还添加了一些填充，以便您可以更轻松地查看文本


这确实是另一个问题，但是使用
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;
}

完整代码在
中，您没有从CSS中删除最大高度，这就是导致问题的原因。您可以在这里做两件事：

您可以将
max height
设置为
100%

或者，您可以在另一个css类中设置
max height
，并动态地将该类添加和删除到info div中

创建css样式：

.restrict{
    max-height: 180px;
}

点击更多：

$(".info").removeClass('restrict');

点击以下内容：

$(".info").addClass('restrict');

看看我的叉形小提琴的变化：

是，您可以在调整浏览器大小时启用和禁用按钮

您需要像这样构建javascript：

// make your function re-usable
var buttonChecker = function() {
    // show / hide buttons logic here
}

// bind the function to the resize event (note, no parenthesis for calling the function here, it's just a reference passed in that is then called when the resize event is triggered)
$(window).on('resize', buttonChecker);

// call your function on page load so the buttons are correctly shown then (note, parenthesis are used, function is called
buttonChecker();

这样，当调整浏览器大小时，将重新调用“显示/隐藏”按钮功能

PS-这里是OPs示例-请注意
buttonChecker（）
函数的内容以及隐藏和显示的逻辑。
谢谢您的帮助。现在，我请求你做以下事情。1.转到上面提供的更新的JSFIDLE链接。2.将结果屏幕尽可能宽地展开。3.运行脚本。4.现在，缩小结果屏幕。您可以看到，随着越来越近的收缩，末尾的一些文本会丢失。这是因为您正在调整运行时屏幕宽度的大小。也可以编写代码来解决这个问题吗？谢谢你帮助我。：-）您的意思是想在调整窗口大小时，当
info
高度小于
180px
时隐藏
show more
按钮，而当
info
高度大于
180px
时隐藏show then按钮？谢谢您的帮助。现在，我请求你做以下事情。1.转到上面提供的更新的JSFIDLE链接。2.将结果屏幕尽可能宽地展开。3.运行脚本。4.现在，缩小结果屏幕。您可以看到，随着越来越近的收缩，末尾的一些文本会丢失。这是因为您正在调整运行时屏幕宽度的大小。也可以编写代码来解决这个问题吗？谢谢你帮助我。：-）我没有发现我的解决方案中缺少任何文本。当你在展开后收缩屏幕时，它会包装文本并展开红色框。看看这个提琴-在这种情况下，必须禁用“显示更多/更少”按钮。只有当div的高度超过180px时，它才应处于活动状态，当div的高度低于180px时，它会自动消失。是的，谢谢你的代码。我已经在这里实现了，但是它只有在第一次显示更多/更少按钮时才起作用。而且，当屏幕尺寸扩展到最大值时，它不会消失。我会让你做以下事情来澄清我的问题：1。缩小结果屏幕2。运行脚本3。现在，展开结果窗口。即使文本包含在div中，仍然会出现showmore按钮。有什么方法可以使它可见/不可见吗？谢谢您的帮助。是的，我想您必须将按钮显示逻辑添加到函数中，以便在
resize
上调用它-您可以看到我的示例，函数是空的，因此您需要填充它：-）看到这个。。。修正：-注意我是如何用逻辑填充函数的，还添加了隐藏的内容以及显示谢谢你，托尼·利！这段代码工作得很完美！：-）是的，我看到小提琴了。当您展开结果窗口时，由于整个文本都被容纳在div容器中，您可以看到showmore按钮并没有消失。我要求你们做以下步骤，1。转到上面提供的更新的JSFIDLE链接。2.将结果屏幕尽可能宽地展开。3.运行脚本。4.现在，缩小结果屏幕。你可以看到，随着你越来越近，结尾的一些文字消失了。这是另一个问题。要克服这一点，您需要提供一个填充。此外，如果将结果窗口缩小到比内容小的范围，则首先它会尝试通过放置换行符而不是空格来容纳文本。如果没有要删除的空白，那么内容显然会被剪裁或显示在其他元素的顶部。
// make your function re-usable
var buttonChecker = function() {
    // show / hide buttons logic here
}

// bind the function to the resize event (note, no parenthesis for calling the function here, it's just a reference passed in that is then called when the resize event is triggered)
$(window).on('resize', buttonChecker);

// call your function on page load so the buttons are correctly shown then (note, parenthesis are used, function is called
buttonChecker();