在div中顯示「顯示更多」按鈕而不是垂直滾動條

-4

我有一個包含一些html內容的固定高度div。當這個高度溢出時，我不希望滾動條出現，而是在div底部的按鈕。只有當你按下這個按鈕時，所有的內容纔會顯示出來，顯然滾動條會自動顯示。我知道有一個名爲「溢出」的屬性，你可以使用「滾動」值，但我不需要滾動條，直到用戶按下按鈕。請注意，如果沒有發生溢出，應該沒有按鈕。在div中顯示「顯示更多」按鈕而不是垂直滾動條

---------------div starts----------------- 
CONTENT CONTENT CONTENT CONTENT 
CONTENT CONTENT CONTENT CONTENT 
CONTENT CONTENT CONTENT CONTENT 
CONTENT CONTENT CONTENT CONTENT 
CONTENT CONTENT CONTENT CONTENT 
CONTENT CONTENT CONTENT CONTENT 
CONTENT CONTENT CONTENT CONTENT  

    [SHOW MORE BUTTON ] 

---------------div ends-----------------

你會如何實現這個沒有jQuery的？你如何使用JavaScript來感知內容會溢出？

來源

2016-07-31 Nulik

你應該先嚐試你問什麼，和你已經嘗試過什麼禮物你的問題，具體是什麼，你的卡上。此外，您的問題留給許多未知因素給任何人提供準確的答案。有許多JavaScript庫，以及純CSS的選項，可能會爲你工作。 – DirtyRedz

@DirtyRedz我不知道如何實現它，這就是爲什麼我問。我認爲這個問題很明顯，我只想在div底部有一個「SHOW MORE」按鈕，還有一個ASCII圖片。 – Nulik

DirtyRedz在說什麼，如果你問某個問題，你會有更好的機會得到答案。你的問題是非常開放的;有許多不同的方法來實現你所要求的。事實上，一個快速的網絡搜索將揭示很多。 – Will

您可以使用css僅實現此目的（使用checkbox和:checked css狀態）。

讓我知道，如果不清楚。

注意：max-height:500px;這只是一個例子。如果內容應該更大，請使用此值。

input[type="checkbox"] { 
 
    display:none; 
 
} 
 

 
label { 
 
    color:blue; 
 
    text-decoration:underline; 
 
    margin-top:10px; 
 
    cursor:pointer; 
 
    display:inline-block; 
 
} 
 

 
label:after { 
 
    content:"more"; 
 
} 
 

 
input:checked ~ label:after { 
 
    content:"less"; 
 
} 
 

 
.inner { 
 
    max-height:100px; 
 
    overflow:hidden; 
 
    transition:all .3s ease; 
 
    width:100px; 
 
} 
 

 
input:checked + .inner { 
 
    max-height:500px; 
 
}

<div class="outer"> 
 
    <input type="checkbox" id="readmore" /> 
 
    <div class="inner"> 
 
    CONTENT CONTENT CONTENT CONTENT 
 
    CONTENT CONTENT CONTENT CONTENT 
 
    CONTENT CONTENT CONTENT CONTENT 
 
    CONTENT CONTENT CONTENT CONTENT 
 
    CONTENT CONTENT CONTENT CONTENT 
 
    CONTENT CONTENT CONTENT CONTENT 
 
    CONTENT CONTENT CONTENT CONTENT 
 
    </div> 
 
    <label for="readmore">Read </label> 
 
</div>

來源

2016-07-31 10:17:20

哇，你沒有發佈代碼，它的一件藝術品。令人驚訝的簡單。雖然它完全回答了我的問題，但我不能使用它，因爲我必須使用JavaScript從數據庫訪問「更多內容」，所以100％的CSS不適合我。但也許別人會發布任何其他想法。非常感謝你提供這些提示，我的學習從未停止。 – Nulik

謝謝！知道我幫助某人對我來說意義重大。關於你的評論：'從數據庫訪問「更多內容」你是什麼意思？「更多內容」文本來自數據庫？你能發佈完全**從數據庫返回的HTML嗎？ –

在div中顯示「顯示更多」按鈕而不是垂直滾動條

回答

相關問題