用css显示更多功能

Question

我目前正在开发一个asp.net mvc应用程序，并使用css3进行所有显示。

我在屏幕上有一些文字，我想向用户显示一定数量的文字，并且能够点击“显示更多”的链接。

所以我会设置一个具有设定高度的div，点击该节目会显示其余的内容。

这可以通过css专门实现吗？

Answer 1

您可以使用选中（或无线电）输入来控制相邻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 2

你必须使用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 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/