Question

我正在为图书出版网站设计作者页面的摘要容器。一些作者有更多的摘要内容，而其他作者的内容较少。我想在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 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>

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

如您所见，页脚停留在绝对位置。如果单击更多按钮，（较少）应该下降，低于应该来到页脚。当浏览器收缩/扩展时，是否可以动态启用/禁用show more / less按钮？

Answer 1

将max-height设置为100%以显示更多内容，并在显示较少时将max-height设置为180px。

<强> Updated JSFiddle

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

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

Updated fiddle

这是另一个问题，但是使用innerHeight代替height，您可以检测文本是否溢出窗口大小调整大小：

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

我还在信息框底部放置了less / more按钮，以覆盖可能延伸到填充中的任何文本：

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

完整代码位于this fiddle

Answer 3

您没有从CSS中移除max-height，这就是造成问题的原因。你可以在这里做两件事：

您可以将max-height设置为100%
或者，您可以在另一个css类中设置max-height，然后动态地将该类添加到info div

创建一个css样式：

.restrict{
    max-height: 180px;
}

点击更多：

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

点击次数：

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

请参阅我的分叉小提琴：

https://jsfiddle.net/jdnf5vka/4/

Answer 4

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

您需要像这样构建您的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 - 这是固定的OP示例：http://jsfiddle.net/9dgs6432/20/ - 注意buttonChecker()函数的内容以及要隐藏和显示的逻辑。

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

4 个答案: