如何最終確定擾流板

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

HERE IS THE DEMO

CODE -

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