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. Brute-Force-Attack on Triple-DES with Reduced Key Space

    题目地址:https://www.mysterytwisterc3.org/en/challenges/level-ii/brute-force-attack-on-triple-des-with-r ...

  2. 清除@SessionAttributes 网站实现退出登录

    在网站实现登录时,我认识了@SessionAttributes,对我来说是真的好用,@SessionAttributes注解可以使得模型中的数据存储一份到session域中. 这样在页面跳转时可以直接 ...

  3. 来自word2013发布的测试文档

    SWIG 是一个非常优秀的开源工具,支持您将 C/C++ 代码与任何主流脚本语言相集成. 此外,它向更广泛的受众公开了基本代码,改善了可测试性,让您的 Ruby 代码库某部分能快速写出高性能的 C/C ...

  4. 在VC6的debug框里面输出版权信息

    在VC6的debug框里面输出版权信息,效果如下: 原理是: 新建一个批处理文档:如:"info.bat",放置到工程目录下[和dsw同级] @echo ===本程序作者是不要呵呵 ...

  5. java读取txt

    java读取txt文件内容.可以作如下理解: 首先获得一个文件句柄.File file = new File(); file即为文件句柄.两人之间连通电话网络了.接下来可以开始打电话了. 通过这条线路 ...

  6. 读取web应用下的资源文件（例如properties）

    package gz.itcast.b_resource; import java.io.IOException; import java.io.InputStream; import java.ut ...

  7. Hashtable源码剖析

    Hashtable简介 Hashtable同样是基于哈希表实现的,同样每个元素是一个key-value对,其内部也是通过单链表解决冲突问题,容量不足(超过了阀值)时,同样会自动增长. Hashtabl ...

  8. SharePoint 2010 将带有工作流的模板移动到另一个站点集

    HOWTO Move or Migrate SharePoint 2010 List-based Workflows between Sites and Site Collections I’ve e ...

  9. POJ - 2533 Longest Ordered Subsequence与HDU - 1257 最少拦截系统 DP+贪心（最长上升子序列及最少序列个数）（LIS）

    Longest Ordered Subsequence A numeric sequence of ai is ordered if a1 < a2 < ... < aN. Let ...

  10. 第6章 图的学习总结（邻接矩阵&邻接表）

    我觉得图这一章的学习内容更有难度,其实图可以说是树结构更为普通的表现形式,它的每个元素都可以与多个元素之间相关联,所以结构比树更复杂,然而越复杂的数据结构在现实中用途就越大了,功能与用途密切联系,所以 ...