如何在瀏覽器調整大小時觸發基於div大小的顯示或隱藏操作

Question

我正在爲書籍發佈網站中的作者頁面設計摘要容器。一些作者有更多的摘要內容，而其他作者的內容較少。我想在div容器的高度越過截斷高度（180px）時動態地​​啓用/禁用show more/less按鈕。所以，事實證明，動態控制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(); 
    } 
}); 

我也位於以下/以上按鈕絕對位於信息框的底部，以覆蓋可能延伸到填充的任何文本：

.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中刪除最大高度，這是什麼原因造成的問題。你可以做兩件事情在這裏：

1. 要麼你可以設置max-height到100%

2. 或者，您可以設置在另一個CSS類max-height和添加和刪除類的信息格設置動態

創建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 - 這裏是OPs示例修正：http://jsfiddle.net/9dgs6432/20/ - 注意buttonChecker()函數的內容以及要隱藏和顯示的邏輯。