如何敲定扰流板

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

HERE IS THE DEMO

代码 -

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">↓</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;
}

Answer 2

您可以随时执行以下操作：

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