jQuery 中 toggle 作用

切换元素的显示与隐藏状态

如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

<body>

<div class="header">

  <div class="logo"><a href="###"><img src="data:images/logo.png" /></a></div>

  <div class="search">

    <form>

      <input type="text" class="sBox" value="请输入关键字" onfocus="if(value=='请输入关键字') {value=''}" onblur="if (value=='') {value='请输入关键字'}"/>

      <input type="submit" class="sBtn" value="" />

    </form>

  </div>

</div>

<div class="nav">

  <div class="c-nav">

    <ul>

      <li><a href="###" class="current">首页</a></li>

      <li class="h-m"><a href="###">爱生活<i></i></a>

        <ul class="menu l-life">

          <li><a href="###">养生<em></em></a></li>

          <li><a href="###">杂谈<em></em></a></li>

          <li><a href="###">穿着<em></em></a></li>

          <li><a href="###">健身</a></li>

        </ul>

      </li>

      <li class="h-m"><a href="###">资讯<i></i></a>

        <ul class="menu r-news">

          <li><a href="###">八卦<em></em></a></li>

          <li><a href="###">趣事<em></em></a></li>

          <li><a href="###">奇闻<em></em></a></li>

          <li><a href="###">发现</a></li>

        </ul>

      </li>

      <li class="h-m"><a href="###">谈情<i></i></a>

        <ul class="menu t-feelings">

          <li><a href="###">约会<em></em></a></li>

          <li><a href="###">性情</a></li>

        </ul>

      </li>

      <li class="h-m"><a href="###">找娱乐<i></i></a>

        <ul class="menu l-ent">

          <li><a href="###">娱乐<em></em></a></li>

          <li><a href="###">资讯<em></em></a></li>

          <li><a href="###">历史</a></li>

        </ul>

      </li>

      <li><a href="###">资料</a></li>

      <li><a href="###">美图</a></li>

      <li><a href="###">专题</a></li>

    </ul>

    <div class="weixin"><a href="###"><i></i>关注微信</a>

      <div class="QRcode"><img src="data:images/QRcode.png" /></div>

    </div>

  </div>

</div>

<div class="subNav">

  <div class="hot"><b>热点推荐：</b><a href="###">秘法</a><a href="###">图片</a><a href="###">图片</a><a href="###">视频</a></div>

</div>

<!--导航条js-->

<script>

$(document).ready(function(e) {

    $('.nav .c-nav ul li').hover(function(){

        if($(this).hasClass('h-m')){

            $('.subNav .hot').toggle()

        }

        })

});

</script>

</body>

默认显示

鼠标悬浮

参数 描述
speed

可选。规定元素从可见到隐藏的速度（或者相反）。默认为 "0"。

可能的值：

  • 毫秒 （比如 1500）
  • "slow"
  • "normal"
  • "fast"

在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。

如果设置此参数，则无法使用 switch 参数。
callback

可选。toggle 函数执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数，否则不能设置该参数。
switch

可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。

  • True - 显示所有元素
  • False - 隐藏所有元素

如果设置此参数，则无法使用 speed 和 callback 参数。

提示和注释

注释：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。

jQuery toggle 使用的更多相关文章

  1. jquery toggle()设置

    很多朋友对jquery toggle()比较熟练,甚至经常用到,而且对toggle的三个参数也比较了解$(selector).toggle(speed,callback,switch).但是当你设置$ ...

  2. jquery toggle()方法 语法

    jquery toggle()方法 语法 作用:toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件.该方法也可用于切换被选元素的 hide() 与 sho ...

  3. jQuery toggle() 方法与实例以及代替方法。

    看<jQeury 权威指南>时看到这个toggle()方法.因为之前在慕课网学习接触过.发现两者讲的有细微的不同 以隐藏/显示目标元素效果为例,慕课网是这样讲解的 $("#cli ...

  4. jquery toggle 方法被废除的替代方法

    今天使用 toggle 方法的时候,该方法一直不能生效. 原来jquery 的引入文件是1.9,该方法在1.8以上已被废除. 那么简单的切换状态,我们可使用if 语句进行代替 如下: 记录一开始设置隐 ...

  5. jquery toggle(listenerOdd, listenerEven)

    1. example: <!DOCTYPE HTML><html>    <head></head>    <body>        &l ...

  6. jquery toggle方法使用出错?请看这里-遁地龙卷风

    这个函数在1.9之前和1.9之后的用法大不相同 1 1.9之间,用于点击元素时函数的轮流执行 toggle(function() { alert(1);//1,3,5,7... },function( ...

  7. jquery toggle方法

    $("#myDiv").toggle(function () { alert(1); }, function () { alert(2); }); 某种需求下可以替代click事件 ...

  8. jQuery toggle方法的一个奇怪表现。

    function buildTree() { //$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title' ...

  9. jquery toggle 替换的实现

    $('#example').click(function(){$("#exampleBox").toggle();}) 改为 $('#example').click(functio ...

随机推荐

  1. file -i haha.csv

    user@user-desk ~/Downloads/largetrd$ file -i LT_Largetrd.csvLT_Largetrd.csv: text/plain; charset=utf ...

  2. JDK5特性

    静态导入(了解) JDK 1.5 增加的静态导入语法用于导入类的某个静态属性或方法.使用静态导入可以简化程序对类静态属性和方法的调用. 语法: import static 包名.类名.静态属性|静态方 ...

  3. [转]C/C++获取当前系统时间

    原文转自:http://www.cnblogs.com/mfryf/archive/2012/02/13/2349360.html 个人觉得第二种还是比较实用的,而且也是最常用的~ 不过当计算算法耗时 ...

  4. <c和指针>学习笔记2之数据和语句

    1 语句 (1)空语句----->本身只包含一个分号 (2)表达式语句 在表达式后面加上一个分号就可以把表达式转变为语句 (3)代码块 位于一对花括号之内的可选的声明和语句列表 (4)if语句 ...

  5. js中“||”和“&&”的高级用法

    例1:用于赋值&&:从左往右依次判断,当当前值为true则继续,为false则返回此值(是返回未转换为布尔值时的原值哦)|| : 从左往右依次判断,当当前值为false则继续,为tru ...

  6. vb常用命名空间

    摘自:http://www.2cto.com/kf/201211/170837.html 感谢 (一)如下是系统中分离出来Imports MicrosoftImports Microsoft.CSha ...

  7. webbrowser 控件实现WinForm与WebForm交互

    WebBrowser 控件可以让你装载Windows Form 应用程序中的 Web 网页和其它采用浏览器的文件.可以使用webbrowser 控件将现有的web框架控制项加入至 Windows Fo ...

  8. MATLAB求解线性规划

  9. 使用BCG创建Pie

    1.新建一个BCG的对话框,添加一个文本框,并修改属性,添加成员变量,并设置Category为Control. 2.在class CCharPieDlg : public CBCGPDialog修改文 ...

  10. linux命令之env和export

    1.查看环境变量: env查看所有的环境变量: 使用echo命令查看单个环境变量.例如: echo $PATH 使用set查看所有本地定义的环境变量. unset可以删除指定的环境变量. 2.常用环境 ...