我目前正在开发一个asp.net mvc应用程序,并使用css3进行所有显示。
我在屏幕上有一些文字,我想向用户显示一定数量的文字,并且能够点击“显示更多”的链接。
所以我会设置一个具有设定高度的div,点击该节目会显示其余的内容。
这可以通过css专门实现吗?
您可以使用选中(或无线电)输入来控制相邻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%;
}
你必须使用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>
您可以使用: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;
}
或者你可以使用: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;
}