我想在我的网站上重现 YouTube 的“显示更多”功能。在每个视频下方,都有一个“显示更多”链接。如果您单击该链接,它会向下移动,并显示一些以前隐藏的文本。我怎样才能做到这一点?
2 回答
我刚刚做的纯 CSS 版本:http: //dabblet.com/gist/3157489
它适用于 Chrome、Firefox、Safari、Opera、IE9+。Show/hide 在 IE9 中可以使用,但缺少过渡(渐变淡入淡出是使用附加元素模拟的)。
HTML 结构类似于:
<div class="info-wrapper">
<input type="checkbox" id="showhide">
<label for="showhide">
<div class="more">Show more</div>
<div>Show less</div>
</label>
<div class="info">
<p><!-- text, text, more text --></p>
<!--[if lte IE 9]><div class="aftershadow"></div><![endif]-->
</div>
</div>
CSS:
body {
background: #ccc;
}
.info-wrapper {
height: auto;
width: 500px;
margin: 4em auto;
padding: 0 0 2em 0;
position: relative;
}
.info {
max-height: 120px;
height: auto;
padding: .5em 0;
border-bottom: solid 1px #fff;
border-radius: 0 0 1em 1em;
overflow: hidden;
position: relative;
transition: 1s;
}
p { margin: 1em; }
.info:after, .aftershadow {
bottom: 0;
width: 100%;
height: 3em;
border-radius: 0 0 1em 1em;
position: absolute;
background: linear-gradient(rgba(192,192,192,0), #ccc);
content: '';
}
.aftershadow {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00cccccc, endColorstr=#ffcccccc);
}
.info-wrapper input[type=checkbox] {
display: none;
}
.info-wrapper label {
left: 50%;
bottom: 1.5em;
width: 9em;
height: 1.25em;
margin: 0 0 0 -2.5em;
border-bottom: solid 1px #fff;
border-radius: 0 0 1em 1em;
overflow: hidden;
position: absolute;
font: 700 .67em/1.25em Arial;
text-align: center;
text-shadow: 0 1px 0 #fff;
cursor: pointer;
}
.info-wrapper label .more { margin: -.1em 0 .35em; transition: 1s; }
.info-wrapper input[type=checkbox]:checked ~ .info {
max-height: 15em;
}
.info-wrapper input[type=checkbox]:checked + label .more {
margin-top: -1.65em;
}
想法如下:在 HTML 结构中,您有一个隐藏的复选框,但可以通过单击它来选中/取消选中label
。
最初,信息被压缩并且复选框未被选中。单击“显示更多”(位于 内部label
)勾选复选框,您现在可以使用伪类label
更改作为其兄弟元素的元素的样式,并在 HTML(.info
在本例中为 the和一般同级选择器。:checked
这是执行此操作的部分:
.info-wrapper input[type=checkbox]:checked ~ .info {
max-height: 15em;
}
.info-wrapper input[type=checkbox]:checked + label .more {
margin-top: -1.65em;
}
在 IE8 中也可以使用的另一种方法是使用链接及其:focus
/:active
伪类,而不是复选框及其:checked
伪类。这种方法的缺点是,只要您单击页面中的任何其他位置,.info
就会再次压缩。
演示:http: //jsfiddle.net/thebabydino/U7Cyk/
HTML 变化不大,我只是用两个链接替换了复选框和标签
<div class="info-wrapper">
<a href="#" tabindex="1" class="more">Show more</a>
<a href="#" tabindex="1" class="less">Show less</a>
<div class="info">
<p><!--stuff, not wasting space here with it--></p>
<!--[if lte IE 9]><div class="aftershadow"></div><![endif]-->
</div>
</div>
CSS 基本相同。input
与&相关的所有label
内容都已发布,取而代之的是:
.info-wrapper a {
left: 50%;
bottom: 1.5em;
width: 9em;
height: 1.25em;
margin: -.1em 0 .35em -4.5em;
border-bottom: solid 1px #fff;
border-radius: 0 0 1em 1em;
display: block;
overflow: hidden;
position: absolute;
color: #000;
font: 700 .67em/1.25em Arial;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
transition: 1s;
cursor: pointer;
}
.info-wrapper a:focus { outline: none; }
.info-wrapper .less {
margin-top: -1.5em;
opacity : 0;
z-index: -1;
}
.info-wrapper .more:focus ~ .info,
.info-wrapper .more:active ~ .info {
max-height: 15em;
}
.info-wrapper .less:focus ~ .info,
.info-wrapper .less:active ~ .info {
max-height: 120px;
}
.info-wrapper .more:focus,
.info-wrapper .more:active {
opacity: 0;
}
.info-wrapper .more:focus + .less,
.info-wrapper .more:active + .less {
opacity: 1;
z-index: 1;
}
使用 jQuery - 演示http://jsfiddle.net/thebabydino/yDfTq/
$('.more').click(function(){
$(this).animate({'opacity': '0'}, 1000);
$('.less').animate({
'opacity': '1',
'z-index': '1'
}, 1000);
$('.info').animate({'height': '15em'}, 1000);
});
$('.less').click(function(){
$(this).animate({
'opacity': '0',
'z-index': '-1'
}, 1000);
$('.more').animate({'opacity': '1'}, 1000);
$('.info').animate({'height': '120px'}, 1000);
});
HTML 是一样的,CSS 也大体相同:
.info {
height: 120px;
padding: .5em 0;
border-bottom: solid 1px #fff;
border-radius: 0 0 1em 1em;
overflow: hidden;
position: relative;
}
p { margin: 1em; }
.info:after, .aftershadow {
bottom: 0;
width: 100%;
height: 3em;
border-radius: 0 0 1em 1em;
position: absolute;
background: linear-gradient(rgba(192,192,192,0), #ccc);
content: '';
}
.aftershadow {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00cccccc, endColorstr=#ffcccccc);
}
.info-wrapper a {
left: 50%;
bottom: 1.5em;
width: 9em;
height: 1.25em;
margin: -.1em 0 .35em -4.5em;
border-bottom: solid 1px #fff;
border-radius: 0 0 1em 1em;
display: block;
overflow: hidden;
position: absolute;
color: #000;
font: 700 .67em/1.25em Arial;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
cursor: pointer;
}
.info-wrapper a:focus { outline: none; }
.info-wrapper .less { margin-top: -1.5em; opacity: 0; z-index: -1; }
其中一个标签表明您愿意使用 jQuery。以下链接说明了如何使用 slideToggle 实现此效果。display: none;
如果您希望在第一个页面加载时将其隐藏,则应设置 div 或其他元素的样式。
http://www.mkyong.com/jquery/jquery-slideup-slidedown-and-slidetoggle-example/
$("#slideToggle").click(function () {
$('.slideTogglebox').slideToggle();
});