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

时间:2013-04-04 07:02:14

标签: jquery

我使用以下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>

2 个答案:

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

这有意义吗?

答案 1 :(得分:0)

这个怎么样?

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