css - 使用 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/