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/

Toggle Plus和Minus jQuery UI

1 个答案: