`

Jquery中 slideToggle() 和toggleClass()用法

阅读更多

       1.如果控制一个标签或者一个菜单的显示与隐藏,并且要出现滑动效果,jQuery slideToggle()是最佳的选择,只需一行代码就OK了。小结一下它的用法:

 

slideToggle()用法通过使用滑动效果(高度变化)来切换元素的可见状态。如果元素是可见的,则为隐藏,反之亦然也。如:

<script>
    $(function () {
        $("#left .dt2").click(function () {
            $("#left .dt2").removeClass("bimg");
            $(this).addClass("bimg");
            $(this).next().slideToggle(XXX);//隐藏或者显示 可带参数表上显示的速度
        });
    });
</script>

       2.添加或者删除某一个标签的属性,会比较经常用到。小结一下其中的2中方法

<1>

if(){
$(“”).addClass(XXX);
}else{
$(“”).removeClass(XXX);
}

 这种方法虽然可行,但是代码臃肿

 

<2> 

$(“”).toggleClass(XXX);

 这个方法代码简介,也能达到要求。

toggleClass()该方法检查元素中指定的类,如果不存在则添加该类,如果已存在则删除该类。

 

分享到:
评论

相关推荐

    jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)

    slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态。

    jQuery的slideToggle方法实例

    jQuery的slideToggle方法实例,需要的朋友可以参考一下

    jquery slideToggle函数滑动竖直导航菜单鼠标点击...

    jquery slideToggle函数滑动竖直导航菜单鼠标点击... jquery slideToggle函数滑动竖直导航菜单鼠标点击... jquery slideToggle函数滑动竖直导航菜单鼠标点击...

    jQuery实现的简单折叠菜单(折叠面板)效果代码

    主要介绍了jQuery实现的简单折叠菜单(折叠面板)效果代码,涉及jQuery中slideToggle与toggleClass方法的灵活使用技巧,需要的朋友可以参考下

    react-slide-toggle:React组件对jQuery.slideToggle功能的重新实现

    关于React版本的jQuery.slideToggle。 在每个requestAnimationFrame上设置高度JavaScript动画。 在移动过程中,拨动方向可以反转。 如果您正在寻找基于CSS过渡的替代方法,请改用此方法支持的React版本React版本16.0...

    slidetoggle滑动菜单

    《锋利的jquery》slidetoggle方法实现滑动菜单

    dom-slider:jQuery的slideToggle(),slideDown()和slideUp()的纯JavaScript版本,但不使用display:无

    它的工作方式类似于jQuery的slideToggle(),slideDown()和slideUp(),但不使用display:none。 使用CSS3过渡和element.scrollHeight设置高度未知的元素的高度的动画。 也是一回事。 特征: 滑动高度已知或...

    jQuery 1.4.1 中文参考

    9.2.3 slideToggle(speed, [callback]) 152 9.3 淡入淡出 152 9.3.1 fadeIn(speed, [callback]) 152 9.3.2 fadeOut(speed, [callback]) 153 9.3.3 fadeTo(speed, opacity, [callback]) 154 9.4 自定义 155 9.4.1 ...

    SlideToggle导航纯手打

    SlideToggle导航纯手打

    jQuery权威指南-源代码

    其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...

    JQuery权威指南源代码

    slideToggle()方法 fadeIn()和fadeOut()方法 fadeTo()方法 简单的动画 移动位置的动画 队列中的动画 动画停止和延时 动画方式浏览图片 第6章 传统的JavaScript方法实现Ajax功能 load()方法实现Ajax功能 ...

    jQuery详细教程

    jQuery 事件处理方法是 jQuery 中的核心函数。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。 通常会把 jQuery 代码放到 部分的事件处理方法中: 实例 ...

    jQuery 1.3 API 参考文档中文版 html

    * show, hide, toggle, slideDown, slideUp, slideToggle 在jQuery 1.3中,padding和margin也会有动画,效果更流畅。 * jQuery(html,[ownerDocument])等效于$(document.createElement("span") * is支持复杂表达式 ...

    jQuery带动画效果的三级下拉菜单

    jQuery带动画效果的三级下拉菜单,导航菜单很炫哦,很酷

    jQuery权威指南366页完整版pdf和源码打包

    10.2 处理选择器中的不规范元素标志 10.2.1 选择器中含有特殊符号 10.2.2 选择器中含有空格符号 10.3 优化事件中的冒泡现象 10.4 使用data()方法缓存数据 10.5 解决jquery库与其他库的冲突 ...

    jQuery简单实现列表隐藏和显示效果示例

    主要介绍了jQuery简单实现列表隐藏和显示效果,结合实例形式分析了jQuery中slideToggle动态操作页面元素切换的相关技巧,需要的朋友可以参考下

    jQuery 1.5 API 中文版

    IE用户无法在线查看本文档,请下载jQuery API Version1.5 中文版AIR客户端查看,或者使用chrome,safari,firefox,opera等浏览器查看!!! jQuery 1.5 API Cheat Sheet来源 Selectors Basics #id element .class, ...

    jQuery1.3API参考文档中文版

    * show, hide, toggle, slideDown, slideUp, slideToggle 在jQuery 1.3中,padding和margin也会有动画,效果更流畅。 * jQuery(html,[ownerDocument])等效于$(document.createElement("span") * is支持复杂表达式 ...

Global site tag (gtag.js) - Google Analytics