jquery中toggle方法使用例子

query的出现让web开发的工作变得更加简单快速。以前需要写一堆js代码的地方，用jquery几句代码就over了。下面作者就用jquery的toggle方法快速实现工作中几种常见的js效果。仅列举示例说明，也算是对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');