将更多选项更改为更少选项或反之亦然

Question

我想知道如何使[[更多选项]]更改为[[更少选项]]和vs如果我单击它。

<div class="toggle-this" style="display: none"> 
<h3 style="border:1px solid;">Job Search</h3></div> 
<div class="toggle-this" style="display: none"><div class="form_input"></div></div> 

<div class="toggle-trigger" style="text-align:center; cursor: pointer;">[[More options]]</div> 

<script language="javascript"> 
$(".toggle-trigger").click(function() { 
$('.toggle-this').toggle(); 
return false; 
}); 
</script> 

Answer 1

$(document).ready(function(){ 
    $(".toggle-trigger").click(function(e) { 
     var $elem = $('.toggle-this'); 
     $elem.toggle(); 
     $(this).text($elem.is(':hidden') ? '[[More options]]' : '[[Less options]]') 
     e.preventDefault(); 
    }); 
}) 

http://jsfiddle.net/ffEMq/

Answer 2

更优雅：

$(".toggle-trigger").click(function() 
{ 
    var map = {"none": "[[More options]]", "block": "[[Less options]]"}; 
    var element = $('.toggle-this').toggle(); 

    $(this).text(map[element.css("display")]); 

    return false; 
});​ 

看这个jsFiddle。