jquery - 在显示/隐藏 div 时添加 + 和 - 号

Question

我使用下面的 jQuery 来显示/隐藏一个 div。我需要在其中添加一个“+”和“-”符号。有人请告诉我如何添加它

function toggleWidgets() {
    $('#secondary h3.widget-title').addClass('plus');

    $('#secondary h3.widget-title').click(function() {


        $(this).toggleClass('plus').toggleClass('minus').next().toggle(180);
    });
}
$(document).ready(function() {
    toggleWidgets();
});

这是HTML

<div id="secondary" class="widget-area" role="complementary">
<aside id="welt_last_tweets-2" class="widget widget_welt_last_tweets">
    <h3 class="widget-title"></h3>
    <div id="welt-welt_last_tweets-2" class="welt-tweet-wrapper">

    </div>
</aside>        
</div>

Answer 1

如果我是你，我只会切换一门课。

$('.plus').click(function() {
    $(this).toggleClass('minus');
});

并且在你的css中添加一个加号图像作为标准的标题，然后当它也有减号类时将它换成一个减号图像。就像是：

.plus {
    background: url('images/plus.gif') left center no-repeat;
}
.plus.minus {
    background: url('images/minus.gif') left center no-repeat;
}

那有意义吗？

Answer 2

这个怎么样？

   function toggleWidgets() {  
        $('#secondary h3.widget-title').click(function() {
            if($(this).is('.plus')) 
              $(this).switchClass('plus', 'minus');   
            else
              $(this).switchClass('minus', 'plus');   
        });
    }