显示更多功能与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/