jquery - 切换加号和减号 jQuery UI

Question

有没有办法为这段代码添加一个 + 和 - 的跨度？我正在努力让它工作。我希望它在来回切换时位于 div 中。该代码运行良好，但每次我更改代码时它似乎都不起作用。：-/

<script>
$(function() {
      $( '.mylisting-trigger' ).click(function() {
      $( '.mylisting-main' ).toggle( 'blind', {direction: 'down'}, 200 );
        return false;
     });
    });
</script>

这是我正在使用的 HTML。

<div class="row mylisting">
<div class="twelve columns">
    <div class="mylisting-header">
        <a href="#" class="mylisting-trigger"><h1>my listing</h1><h1><span>(24)</span></h1></a>
    </div><!--/mylisting-header-->
    <div class="mylisting-main">
        <div class="mylisting-options">
            <p>
                <a href="#">Send</a> 
                <a href="#">Rename</a>
                <a href="#">Delete</a>
            </p>
        </div>
            </div><!--/.mylisting-main-->
        </div><!--/twelve columns-->
     </div><!--/row mylisting-->

Answer 1

你可以尝试这样的事情：

<div class="mylisting-header"> 
    <a href="#" class="mylisting-trigger">
         <span class='show'>- Less</span>
    </a>
</div>

$(function () {
    $('.mylisting-trigger').click(function(e) {
        e.preventDefault();
        $('.mylisting-main').toggle('blind', {direction: 'down'}, function () {
            var $this = $(this);
            $('.show').text(function (i, v) {
                return $this.is(':hidden') ? '+ More' : '- Less';
            })
        });
    });
});

http://jsfiddle.net/nxGfM/