顯示更多功能與css

Question

我目前正在一個asp.net mvc應用程序和使用css3所有我的顯示。

我在屏幕上有一些文字，我想向用戶顯示一定量的點擊「顯示更多」鏈接的能力。

所以我會有一個設置高度的div，點擊顯示更多將顯示其餘的內容。

這可以用css專門實現嗎？

Answer 1

你必須用css來發揮這個看的權利（讓節目更是在底部），而是一個解決方案看起來像

<a id="showmore" href="#">Show More</a> 
<div id="content">lots of content</div> 

CSS：

<style> 
#content { height: 100px; overflow: hidden; } 
a#showmore:visited + #content { height: auto; overflow: visible} 
</style> 

Answer 2

您可以使用選中的（或無線電）輸入來控制相鄰div的可見性。您還可以隱藏輸入控件並操作輸入的位置等，使其顯示在內容下方。

<div class="container"> 
<input id="ch" type="checkbox"> 
<label for="ch"></label> 
<div class="text"> your actual text goes here</div> 
</div> 

.text { 
    height: 100px; 
    overflow: hidden; 
} 
.container { 
    position: relative; 
} 
label { 
    position: absolute; 
    top: 100%; 
} 
input { 
    display: none; 
} 
label:after { 
    content: "Show More"; 
} 
input:checked + label:after { 
    content: "Show Less"; 
} 
input:checked ~ div { 
    height: 100%; 
} 

http://jsfiddle.net/ExplosionPIlls/6sj4e/

Answer 3

可以使用:target選擇。

HTML

<a id="showmemore" href="#contentofsite">Show More</a> 
<div id="contentofsite"> 
    ...... 
    ...... 
    ...... 
    ...... 
</div> 

CSS

#contentofsite { 
    height: 50px; 
    overflow: hidden; 
} 
#showmemore + #contentofsite:target { 
    height: auto; 
    overflow: visible; 
} 

http://jsfiddle.net/MfyPM/

---

或者你可以使用:focus僞類。

HTML

<a id="showmemore" tabindex="0" href="#">Show More</a> 
<div id="contentofsite"> 
    ...... 
    ...... 
    ...... 
    ...... 
</div> 

CSS

#contentofsite { 
    height: 50px; 
    overflow: hidden; 
} 
#showmemore:focus + #contentofsite { 
    height: auto; 
    overflow: visible; 
} 

http://jsfiddle.net/MfyPM/1/