jQuery隐藏和显示带有加号和减号图标的切换div

小编典典

jQuery隐藏和显示带有加号和减号图标的切换div

css

我有显示的代码，并隐藏了div。当显示和隐藏处于活动状态时，如何添加两个不同的图标作为精灵图像？

例如： + 图标显示给我，然后 - 图标隐藏我。

$(document).ready(function(){
   $(".slidingDiv").hide();
   $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
  });
});

切换到 + 或 - 时需要将图像更改为上述图像。

谢谢

阅读 815

2020-05-16

共1个答案

小编典典

试试这个

jQuery

$('#toggle_icon').toggle(function() {

    $('#toggle_icon').text('-');
    $('#toggle_text').slideToggle();

}, function() {

    $('#toggle_icon').text('+');
    $('#toggle_text').slideToggle();

});

HTML

<a href="#" id="toggle_icon">+</a>

<div id="toggle_text" style="display: none">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>

2020-05-16