jquery toggle()函数实例解析

发布时间:2020-02-07编辑:脚本学堂
介绍下jquery中toggle()函数的用法,可以实现显示与隐藏交替的效果,不过要注意在不同浏览器下的区别。

本节内容:
toggle()函数的小例子。

用到jquery的toggle()函数显示参考答案,目标效果:
点击“参考答案”,显示答案,再点击,则隐藏,toggle(fn1,fn2),既是点击时,先触发函数fn1,再点击触发fn2,如此循环。

最初的代码:
 

复制代码 代码示例:
 $("#button1").toggle(function() {
    $(".reference").css('display', 'inherit');
      }, function() {
    $(".reference").css('display', 'none');
      });

 火狐下,效果很好,ie6下却怎样也不行。
 
 换另一种实现方式:
 

复制代码 代码示例:
 $("#button1").toggle(function() {
    $(".reference").toggle();
      }, function() {
    $(".reference").toggle();
      });
 

这次ie6和火狐下都达到了效果,css()函数难道在ie6下失效了?
验证了一下,css()函数没有任何问题,后来又验证了下,发现是display-inherit属性的原因,ie6下,在display为none属性时,改为inherit,它并不显示。

原因解析:
所有主流浏览器都支持 display 属性。

注释:任何版本的 Internet Explorer (包括 IE8)都不支持 "inherit"、"inline-table"、"run-in"、"table"、"table-caption"、"table- cell"、"table-column"、"table-column-group"、"table-row"、以及 "table-row-group" 属性值。

inherit规定应该从父元素继承 display 属性的值。
一般display默认值为inline。