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. Windows C/C++调试

    windows兼容dirent.h error c4996: 'fopen': This function or variable may be unsafe This file requires _ ...

  2. maven学习八 关于maven的version

      在一个有继承关系的POM文件中,父项目中有如下定义: <dependencyManagement> <dependency> <groupId>com.type ...

  3. Unix Timestamp

    class Foundation_API DateTime /// This class represents an instant in time, expressed /// in years, ...

  4. 手把手教你上传文件到GitHub并发布到pod

    第一步:定位到要上传到GitHub的文件夹, 第二步:GitHub中建立一个仓库,用于存放项目. 第三步:建立podspec文件, pod spec create openinstall 然后修改里面 ...

  5. python requests抓取猫眼电影

    1. 网址:http://maoyan.com/board/4? 2. 代码: import json from multiprocessing import Pool import requests ...

  6. ORM应用

    目录 ORM概念 ORM由来 ORM的优势 ORM的劣势 ORM总结 ORM 与 DB 的对应关系图 Model 模块 ORM操作 增删改查操作 ORM概念 对象关系映射(Object Relatio ...

  7. Java Servlet图片上传至指定文件夹并显示图片

    在学习Servlet过程中,针对图片上传做了一个Demo,实现的功能是:在a页面上传图片,点击提交后,将图片保存到服务器指定路径(D:/image):跳转到b页面,b页面读取展示绝对路径(D:/ima ...

  8. jquery.jscrollpane.js滚动速度设置

    首先找到插件里面的这个函数,改变成下面的样子: function initMousewheel() { container.unbind(mwEvent).bind( mwEvent, functio ...

  9. F.Cards with Numbers

    链接:https://ac.nowcoder.com/acm/contest/908/F 题意: AFei has many cards. Each card has a number written ...

  10. 命令行下载工具 wget

    wget 是一个简单而强大的跨平台命令行下载工具,包括 Windows 也有对应的版本.全称 GNU Wget,属于 GNU 计划的一部分,自由软件.支持 HTTP.HTTPS 和 FTP 协议,可在 ...