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

时间:2012-09-20 15:17:27

标签: javascript jquery

我想知道如何将[[更多选项]]更改为[[更少选项]],如果我点击它,则为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>

2 个答案:

答案 0 :(得分: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/

答案 1 :(得分:0)

更优雅:

$(".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