当前位置: 首页 > 面试题库 >

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

芮歌者
2023-03-14
问题内容

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

例如: + 图标显示给我,然后 - 图标隐藏我。

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

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

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

谢谢


问题答案:

试试这个

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>


 类似资料:
  • 这听起来很基本,但我在很多论坛上都能看到 ####################################################################################################################### 加号和减号之间有什么区别,或者只是在标志前没有符号? 这些标志是做什么的?

  • 主要内容:实例,jQuery hide() 和 show(),实例,实例,实例,jQuery toggle(),实例隐藏、显示、切换,滑动,淡入淡出,以及动画,哇哦! 因为时间是宝贵的,我们提供快捷方便的学习方法。 在小牛知识库,你可以学习需要的知识。 实例 jQuery hide() 简单的jQuery hide()方法演示。 jQuery hide() 另一个hide()实例。演示如何隐藏文本。 jQuery hide() 和 show() 通过 jQuery,您可以使用 hide() 和

  • 本文向大家介绍jQuery实现的导航条切换可显示隐藏,包括了jQuery实现的导航条切换可显示隐藏的使用技巧和注意事项,需要的朋友参考一下 用jQuery实现一些导航条切换,显示隐藏,主要运用的技术有slideToggle( ),toggeClass( ),toggle( ): 代码如下: 效果图:

  • 我看过一些样品,但没有一个适合我的需要。 我已经为动画创建了两个xml文件,但我不知道在更改的可见性时如何启动它们。

  • 我正在尝试通过一个按钮切换多个div与相同的类。目前,只有第一个div在执行任务,其余的都被忽略了。我尝试将.getElementById更改为.getElementsByClassName,但它也没有起到这个作用。你能帮忙吗?这是我的代码。我从两天起就开始尝试了。:/ 按钮代码: null null 单击“隐藏”/“显示”按钮时更改按钮文本的代码(德文): null null 问题也许就在这里。

  • 本文向大家介绍jQuery控制元素隐藏和显示,包括了jQuery控制元素隐藏和显示的使用技巧和注意事项,需要的朋友参考一下 1、jQuery隐藏和显示效果 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: 2、jQuery淡入淡出效果 通过 jQuery,您可以实现元素的淡入淡出效果。 jQuery 拥有下面四种 fade 方法: fadeIn()