javascript - 切换/取消切换时将更多选项更改为更少选项，反之亦然

Question

我想知道如何将 [[More options]] 更改为 [[Less options]] 以及如果我单击它。

<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。