我有一个非常基本的显示/隐藏功能,可以向上和向下滑动粘性标题以显示更多内容。当容器打开或关闭时,我设法获得触发器将文本更改为适当的措辞,但我也喜欢在附加文本中添加向上箭头和向下箭头字形。如何实现这一目标?
我正在寻找的输出应该是这样的:
↓展开播放列表
↑关闭播放列表
以下是我的标记到目前为止的样子:
HTML
<div id="sticky_header">
<div id="sticky_content" class="player">
<a href="#" id="toggle_sticky_header">Expand Playlist</a>
</div>
</div>
CSS
/*
-------------------------------------------------------------------------
Sticky Header
-------------------------------------------------------------------------
*/
#sticky_header {
background-color: #000000;
/* border-bottom: 5px solid #B54000; */
border-bottom: 5px solid #0995B0;
/* height: 100px; */
height: 600px;
min-width: 100%;
width: 100%;
position: fixed;
top: -500px;
left: 0px;
z-index: 2000;
box-shadow: 0px 1px 15px #000000;
-moz-box-shadow: 0px 1px 15px #000000;
-webkit-box-shadow: 0px 1px 15px #000000;
}
#sticky_content {
margin: 0px auto;
width: 990px;
padding: 15px 0px;
color: #FFFFFF;
position: relative;
}
a#toggle_sticky_header {
position: absolute;
bottom: -560px;
right: 0px;
color: #0995B0;
font-size: 10px;
line-height: 10px;
text-transform: uppercase;
}
JQUERY
<!-- Toggle sticky header -->
<script type="text/javascript">
$(document).ready(function(){
$('#toggle_sticky_header').click(function(){
if($("#sticky_header").css("top") == "-500px") {
$("#sticky_header").animate({top: "0px"}, 500);
} else {
$("#sticky_header").animate({top: "-500px"}, 500);
}
$(this).toggleClass("active");
if ($(this).html() == "Expand Playlist") {
$(this).html("Close Playlist");
}
else if ($(this).html() == "Close Playlist") {
$(this).html("Expand Playlist");
}
return false;
});
});
</script>
答案 0 :(得分:1)
鉴于您使用的是html()
,您只需使用html实体:
if ($(this).html() == "Expand Playlist") {
$(this).html("↑ Close Playlist");
}
else if ($(this).html() == "Close Playlist") {
$(this).html("↓ Expand Playlist");
}
虽然我建议稍作修改:
$(this).html(function(i,h){
return h == '↓ Expand Playlist' ? '↓ Expand Playlist' : '↑ Expand Playlist'
});
参考文献: