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. 获取.net对象的属性集

          int count = System. ComponentModel.TypeDescriptor .GetProperties( StudyInfo).Count ;           ...

  2. Oracle日期范围

    一.SQL语句: select to_date(to_char(to_date('2017-10-01', 'yyyy-mm-dd') + rownum - 1, 'yyyy-mm-dd'), 'yy ...

  3. 反射-Class

    package classes; public class ClassDemo1 { public static void main(String[] args){ Foo foo1 = new Fo ...

  4. try-catch-finally中return的执行情况

    在try中没有异常的情况下try.catch.finally的执行顺序 try--- finally 如果try中有异常,执行顺序是try--- catch --- finally 如果try中没有异 ...

  5. Spring：JdbcTemplate使用指南

    Spring:JdbcTemplate使用指南 Spring:JdbcTemplate使用指南 前言: 本文指在介绍Spring框架中的JdbcTemplate类的使用方法,涉及基本的Spring反转 ...

  6. C++ 无边框的拖动窗口代码

    按下鼠标时,记录下鼠标在窗体上的坐标, 同时用一个BOOL变量记录下鼠标左键按下的状态 弹起左键,则记录状态的布尔变量为FALSE. 处理鼠标移动事件,如果左键同时按下,则为鼠标拖动窗体运动,设置窗体 ...

  7. ASP.NET学习笔记（二）语法

    基本的 ASP 语法规则 通常情况下,ASP 文件包含 HTML 标签,类似 HTML 文件.不过,ASP 文件也能够包含服务器端脚本,这些脚本被分隔符 <% 和 %> 包围起来. 在 A ...

  8. 【转】mysql日期格式+日期增加天数

    WHERE DATE_FORMAT(字段,'%m/%d')=DATE_FORMAT(DATE_ADD(SYSDATE(),INTERVAL 7 DAY),'%m/%d') 条件 数据库字段时间=当前时 ...

  9. 《深入理解Java虚拟机》笔记02 -- 垃圾收集算法

    1. 标记 - 清除算法 先标记出所有需要回收的对象,在标记完成后统一回收所有被标记的对象.它是最基础的收集算法.其他收集算法都是根据其思路,改进其不足之处. 缺点:1) 标记和清除两个阶段的效率都不 ...

  10. 【并发编程】一文带你读懂深入理解Java内存模型（面试必备）

    并发编程这一块内容,是高级资深工程师必备知识点,25K起如果不懂并发编程,那基本到顶.但是并发编程内容庞杂,如何系统学习?本专题将会系统讲解并发编程的所有知识点,包括但不限于: 线程通信机制,深入JM ...