javascript - 如何最终确定扰流板

Question

有一个代码http://jsfiddle.net/VWCnd/5/。如何添加指标↓ ↑。示例图片http://i.stack.imgur.com/OxpaP.png

JS：

$(document).ready(function(){
 $('.spoiler_title').click(function(){
  $(this).parent().children('div.spoiler_toggle').toggle();
  return false;
 });
});

html:

<div>
    <a href="" class="spoiler_title">Title</a>     
    <div class="spoiler_toggle">
        <div class="spoiler_bg">Body</div>
    </div>
</div>

CSS：

.spoiler_title {
    display:block;
    background-color: #551A8B;
    color: #fff;
    padding: 10px 10px;
}
.spoiler_toggle {
    display:none;
}
.spoiler_bg {
    background: #9C6AC9;
    padding: 5px 5px;
}

谢谢。

Answer 1

你总是可以做这样的事情：

http://jsfiddle.net/VWCnd/7/

 $('.spoiler_title').click(function(){
     var $this = $(this),
         visible  = $this.parent().children('div.spoiler_toggle').toggle().is(':visible');
     $this.find('.spoiler_indicator').html(visible? '↑' : '↓');
     return false;
 });

Answer 2

这是演示

代码 -

JS：

$(document).ready(function(){
 $('.spoiler_title').click(function(){
     $(this).find(".sp_but").text(($(this).find(".sp_but").text() == '↓' ? '↑' : '↓'))
  $(this).parent().children('div.spoiler_toggle').toggle();
  return false;
 });
});

HTML：

<div>
    <a href="" class="spoiler_title">Title <span class="sp_but">↓&lt;/span></a> 

<div class="spoiler_toggle">
    <div class="spoiler_bg">Body</div>
</div>

</div>

CSS：

.spoiler_title {
    display:block;
    background-color: #551A8B;
    color: #fff;
    padding: 10px 10px;
}
.spoiler_toggle {
    display:none;
}
.sp_but{
    float: left;
    margin-right:20px;
}
.spoiler_bg {
    background: #9C6AC9;
    padding: 5px 5px;
}