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. RT-Thread的线程（任务）处理 rt_thread_create/rt_thread_init区别

    RT-Thread中使用线程这个概念,而不是任务.两者相似,我在这里把他的线程当作任务来理解了 1.任务处理: 动态任务相关API 创建任务:rt_thread_create函数,创建任务之后会返回r ...

  2. 在visualstudio中使用Qt

    1.  说明 在此说明一下IDE跟封装的之间的关系,他们之间本质上来说没有关系,是可以多对对的关系. Qt开发是个比较泛的概念,Qt是由很多一系列类组成的整体,就像boost里面也有很多的类,而boo ...

  3. JAVA,MYSQL,ORACLE的数据类型对比

    MySQL Data Type Oracle Data Type Java BIGINT NUMBER(19, 0) java.lang.Long BIT RAW byte[] BLOB BLOB,  ...

  4. source和sh执行脚本时的差异

    在CentOS7下,有如下脚:sh02.sh. 1 用sh或者bash执行 先执行echo $firstname $lastname 再执行 sh sh02.sh 最后执行 echo $firstna ...

  5. Windows下搭建svn服务器端--创建自…

    Windows下搭建svn服务器端 1.软件 1)服务端:Subversion subversion.apache.org - Getting Subversion - Binary Packages ...

  6. HDU-6395 多校7 Sequence（除法分块+矩阵快速幂）

    Sequence Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total ...

  7. python split 与join

    1.string.join (saq):以string 为分隔符,将seq中所有的元素(字符串表示"")合并成一个新的字符串 2.string.split(str="&q ...

  8. 容易忘记的css属性和动画属性

    动画属性 @keyframes 关键帧 --> animation 活泼 (配合使用) transform 变换 --> transition 过渡 (配合使用) 1.animation ...

  9. [UE4]用C++如何创建Box Collision

    http://www.dawnarc.com/2016/08/ue4%E7%94%A8c--%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BAbox-collision/ 在蓝图 ...

  10. [转]PBFT 算法详解

    https://www.cnblogs.com/mafeng/p/8405375.html