Question

我正在为图书出版网站的作者部分开发一个网页，并在显示更多/显示更少的按钮。有两个媒体div，一个用于作者图像（在左侧）和他的摘要（在右侧）。我想根据摘要内容的高度启用/禁用show more / show less按钮。我想仅在摘要内容的高度大于固定高度图像的高度（180px）时才启用显示更多/更少按钮。

参考：http://jsfiddle.net/thebabydino/U7Cyk/

注意：media，media-media和media-body是bootstrap类。

HTML代码：

 <div id = "author-page">
 <div>
 <h3> 
 Chetan Bhagat
 </h3>
 </div>
 <div class="media">
 <div class="media-left">
 <img class="media-object" src="http://img01.ibnlive.in/ibnlive/uploads/2014/10/chetan_bhagat_151110.jpg"/>
 </div>
 <div class = "media-body">
 <div class="info-wrapper">
 <a href="#" class="more">(more)</a>
 <a href="#" class="less">(less)</a>
 <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>
 </div>
 </div>
 </div>
 </div>

CSS：

    .info-wrapper {
        height: auto;
        position: relative;
        width: auto;
        padding: 0 0 2.5em 0; 
    } 
    .info {
        max-height: 180px;
        height: auto;
        width: auto;
        overflow: scroll;
        position: relative;  
    }
    .info:after, .aftershadow {
        bottom: 0;
        width: auto;
        height: auto;
    }

    .info-wrapper a {
        left: 50%;
        bottom: 1.5em;
        height: 1.25em;
        margin: -.1em 0 .35em -4.5em;
        position: absolute;
        font: 700 .67em/1.25em Arial;
        text-align: center;
        text-decoration: underline;
        cursor: pointer;
    }
    .info-wrapper a:focus { outline: none; }
    .info-wrapper .less { display: none; }


    .info-wrapper .more:focus ~ .info, 
    .info-wrapper .more:active ~ .info {
        max-height: none;
    }


    .info-wrapper .more:focus {

        display: none;
    }
    .info-wrapper .more:focus + .less {
        display: block;
    }

Answer 1

如果我理解你的问题，你可以使用jquery高度功能

     $('window').height(); //gives height of browser viewport

请注意，.height（）将始终返回内容高度，无论CSS box-sizing属性的值是什么

http://api.jquery.com/height

Answer 2

隐藏溢出并以编程方式识别

如果scrollHeight高于div的高度，则使＆＃34;更多＆＃34;可见

var outerHeight = $(".info").outerHeight();

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

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

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

此处，当内容溢出时，outerHeight将达到您的最大高度

因此，您可以为各种屏幕尺寸添加@media查询并相应地使用max-height

选中此http://jsfiddle.net/ZigmaEmpire/9dgs6432/11

Answer 3

我也问过其他人这个任务，我得到了一个解决方案。 :-) 感谢您Nanang回答这个问题。这正是我想要的，

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

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", 'maxHeight': '100%'});
    $("a.less").show();
    $("a.more").hide();
    return false;
});

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

$(window).resize(function() {
    var hg = $('.info').height();

    if (hg && hg >= 180) {
        $('.info').css({ 'maxHeight': 180 });
        $('a.more').show();
    } else {
        $('.info').css({ 'maxHeight': '100%' });
        $('a.more').hide();
    }
});

现在，在JSFiddle中展开和缩小Result列，看看会发生什么。快乐的玩。： - ）

Answer 4

点击显示更多内容时删除最大高度

$(".more").click(function(){
   $(".info").css("max-height","none");
   $(this).hide();
   $(".less").show(); 
});
$(".less").click(function(){
   $(".info").css("max-height","120px");
   $(this).hide();
  $(".more").show();
});

http://jsfiddle.net/dggupta25/U7Cyk/150/

如何通过jQuery获取div容器的高度？

4 个答案: