如何将html字形标记添加到JQuery显示/隐藏函数

Question

我有一个非常基本的显示/隐藏功能，可以上下滑动粘滞标题以显示更多内容。我已经设法让触发器在打开或关闭容器时将文本更改为适当的措辞，但是我也希望将向上箭头和向下箭头字形添加到附加文本中。这怎么能实现？

，我正在寻找的应该是这个样子的输出：
↓展开播放列表
↑关闭Playist

下面就是我的标记看起来像迄今：

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> 

Answer 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' 
}); 

参考文献：

• HTML Symbol Entities。