jquery中toggle方法使用例子

（1）toggle

隐藏显示的切换效果应该是比较常见的。这个效果有多种实现方法，如下：

 代码如下 复制代码

var phpersnote=document.getElementById('phpernote');
if(phpersnote.style.display=='block'){
 phpersnote.style.display='none';
}else{
 phpersnote.style.display='block';
}

var phpersnote=$('#phpernote');
if(phpersnote.is(':hidden')){
 phpersnote.show();
}else{
 phpersnote.hide();
}

$('#phpernote').toggle();

对于以上的show hide toggle方法都有一些参数可以调用从而实现一些动画效果，这里就不说明了。

（2）slideToggle

这个是向下拉或者向上收起的效果，实现方法：

 代码如下 复制代码

var phpersnote=$('#phpernote');
if(phpersnote.is(':hidden')){
 phpersnote.slideDown();
}else{
 phpersnote.slideUp();
}

$('#phpernote').slideToggle();

slideDown slideUp slideToggle 都有相应的参数实现用户体验较好的动画效果。

（3）fadeToggle

对div进行淡入显示淡出隐藏的效果：

 代码如下 复制代码

var phpersnote=$('#phpernote');
if(phpersnote.is(':hidden')){
 phpersnote.fadeIn();
}else{
 phpersnote.fadeOut();
}

$('#phpernote').fadeToggle();

fadeIn fadeOut fadeToggle 都有相应的参数实现用户体验较好的动画效果。

（4）toggleClass

对某个对象添加或者去除class操作：

 代码如下 复制代码

var phpersnote=$('#phpernote');
if(phpersnote.hasClass('com')){
 phpersnote.removeClass('com');
}else{
 phpersnote.addClass('com');
}

$('#phpernote').toggleClass('com');
时间： 2024-09-22 11:22:35

jquery中toggle方法使用例子的相关文章

jQuery中toggle()方法的用法

toggle() 方法切换元素的可见状态. 如果被选元素可见,则隐藏这些元素:如果被选元素隐藏,则显示这些元素. $(selector).toggle(speed,callback,switch); 该方法又可分解为: $(selector).toggle(speed,callback);//参数可选 $(selector).toggle(switch);// switch为true时显示,switch为false时隐藏: Speed:调整动画状态:渐变对象宽高.透明度等: Callback:回

jQuery中.live()方法的用法

 本篇文章主要是对jQuery中.live()方法的用法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 给jquery动态生成的页面元素添加事件?使用livequery插件,或可以使用jquery的live方法.摘录一段live简单使用方法.   live(type, [data],fn)   概述   jQuery给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效.   这个方法是基本是的 .bind() 方法的一个变体.使用 .bind()时,选择

事件-关于jQuery的toggle方法

问题描述 关于jQuery的toggle方法 <!DOCTYPE html PUBLIC ""-//W3C//DTD XHTML 1.0 Transitional//EN"" ""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd""><html xmlns=""http://www.w3.org/1999/xhtml"

使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)_jquery

这是一个示例: <html> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn1").cl

jquery中$each()方法的使用指南_jquery

$.each()与$(selector).each()不同, 后者专用于jquery对象的遍历, 前者可用于遍历任何的集合(无论是数组或对象),如果是数组,回调函数每次传入数组的索引和对应的值(值亦可以通过this 关键字获取,但javascript总会包装this 值作为一个对象-尽管是一个字符串或是一个数字),方法会返回被遍历对象的第一参数. each()方法能使DOM循环结构简洁,不容易出错.each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组.多维数组.DOM, J

jquery中end()方法的使用说明

end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态. 看样子好像是找到最后一次操作的元素的上一元素,在如下的例子中: html代码:  代码如下 复制代码 <div>测试内容1</div> <div>测试内容2</div> jQuery代码:  代码如下 复制代码 $('<p>新增内容</p>').appendTo('div').addClass('c1').end().addClass('c2'); 得到

jquery中toggle函数交替使用问题

  jQuery 的toggle()函数使用show()或hide()函数来切换HTML元素的可见状态.今天我们来探讨下jquery中toggle函数交替使用问题 html中有几个btn触发toggle函数,想要实现的功能是:点击每个toggle时将其他toggle函数的计数全部清零,试过removedata不起作用,是否有更好的办法呢 给大家一个实例来参考下吧 请参考这个:jsp页面 ? 1 2 3 4 5 6 7 8 <li> <label class="labelText

JQuery中clone方法复制节点

  本文实例讲述了JQuery中clone方法复制节点.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT

JQuery中Text方法用法实例分析

  本文实例讲述了JQuery中Text方法用法.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&g