jquery 中toggle的2种用法详解(推荐)

一、在元素的click事件中绑定两个或两个以上的函数  toggle不像bind需要在后面添加"click"来绑定click触发事件，toggle本身就是click触发的（而且只能click触发），

如下实例：

<input id="btntest" type="button" value="点一下我" />
<div>我是动态显示的</div>

<script type="text/javascript">
  $(function () {
    $("#btntest")
      $("#btntest").toggle(
      function(){
        $("div").html("我变了！");
      },
      function(){
        $("div").html("我又变了！");
      });
    });
</script>

二、切换元素的显示与隐藏效果：

<input id="btntest" type="button" value="点一下我" />
<div>我是动态显示的</div>

<script type="text/javascript">
  $(function () {
    $("#btntest").bind("click",function(){
      $("div").toggle(500);//此处的 500 是隐藏显示的延迟时间，默认为0，也可以用"slow","normal"或"fast"
                 //如果里面的值为true（toggle(true)）时只能显示元素，值为false（toggle(false)）时只能隐藏元素。） }) }); </script>

以上这篇jquery 中toggle的2种用法详解(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jquery中toggle函数交替使用问题

    html中有几个btn触发toggle函数,想要实现的功能是:点击每个toggle时将其他toggle函数的计数全部清零,试过removedata不起作用,是否有更好的办法呢 给大家一个实例来参考下吧 请参考这个:jsp页面 <li> <label class="labelText">统计类型:</label> <span class="sortBox"> <a href="javascript:;&q

  • jquery点击改变class并toggle的实现代码

    jquery点击改变class并toggle的实现代码 <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>

  • jquery中show()、hide()和toggle()用法实例

    本文实例讲述了jquery中show().hide()和toggle()用法.分享给大家供大家参考.具体分析如下: 这里介绍了jquery效果:show()方法.hide()方法和toggle()方法 现实应用场景:QQ面板里我的好友分组 复制代码 代码如下: <html> <head> <title>jquery效果:show()方法.hide()方法和toggle()方法</title> <script type="text/javasc

  • jQuery toggle 代替方法

    具体内容如下所示: $('.back_left dt').toggle(function(){ $(this).addClass("selected"); $(this).siblings('dd').slideUp(); },function(){ $(this).removeClass("selected"); $(this).siblings('dd').slideDown(); }); 今天在做一个项目,抄了别人网站上的一代码,发现怎么都无法实现,在我急得不

  • jQuery中toggleClass()方法用法实例

    本文实例讲述了jQuery中toggleClass()方法用法.分享给大家供大家参考.具体分析如下: 此方法对添加或移除匹配元素的一个或多个类进行切换. toggleClass()方法检查匹配元素中指定的类.如果不存在则添加类,如果已设置则删除之.这就是所谓的切换效果. 语法结构一: 复制代码 代码如下: $(selector).toggleClass(class,switch) 如果存在(不存在)就删除(添加)一个类. 参数列表: 参数 描述 class 规定添加或删除的类. 如果需要添加多个

  • jQuery中hover方法和toggle方法使用指南

    jQuery提供一些方法(如:toggle)将两种事件效果合并到一起,比如:mouseover.mouseout:keyup.keydown等 1.hover函数 hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种"保持在其中"的状态. 参数:     over (Function) : 鼠标移到元素上要触发的函数.     out (Function): 鼠标移出元素要触发的函数. 复制代码

  • 用jQuery toggleClass 实现鼠标移上变色

    按钮移上变色效果 复制代码 代码如下: <style> .round-corner-btn { -moz-border-radius:4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; width:200px; height:40px; line-height: 40px; background: green; display:inline-block; color:white; tex

  • jquery 中toggle的2种用法详解(推荐)

    一.在元素的click事件中绑定两个或两个以上的函数  toggle不像bind需要在后面添加"click"来绑定click触发事件,toggle本身就是click触发的(而且只能click触发), 如下实例: <input id="btntest" type="button" value="点一下我" /> <div>我是动态显示的</div> <script type="

  • C#中new的几种用法详解

    在 C# 中,new 关键字可用作运算符.修饰符或约束. new 运算符 用于创建对象和调用构造函数. new 修饰符 用于向基类成员隐藏继承成员. new 约束 用于在泛型声明中约束可能用作类型参数的参数的类型. new 修饰符(C# 参考) 在用作修饰符时,new 关键字可以显式隐藏从基类继承的成员.隐藏继承的成员意味着该成员的派生版本将替换基类版本.在不使用 new 修饰符的情况下隐藏成员是允许的,但会生成警告.使用 new 显式隐藏成员会取消此警告,并记录代之以派生版本这一事实. 若要隐

  • jQuery选择器之属性筛选选择器用法详解

    jQuery选择器之属性筛选选择器用法详解

    在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 [attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="checkbox"]等 [attr*="value"]能在网站中帮助我们匹配不同类型的文件 <!DOCTYPE html> <

  • IOS开发中NSURL的基本操作及用法详解

    NSURL其实就是我们在浏览器上看到的网站地址,这不就是一个字符串么,为什么还要在写一个NSURL呢,主要是因为网站地址的字符串都比较复杂,包括很多请求参数,这样在请求过程中需要解析出来每个部门,所以封装一个NSURL,操作很方便. 1.URL URL是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址.互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它. URL可能包含远程服务器上的资源的位置,本地磁盘上的文件的路径,甚

  • JavaScript中SetInterval与setTimeout的用法详解

    setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止 参数 描述 code 必需,要调用的函数后要执行的 JavaScript 代码串. millisec 必需,在执行代码前需等待的毫秒数. setTimeinterval setInterval(code,millisec[,"lang"]) 参数

  • C++中auto_ptr智能指针的用法详解

    智能指针(auto_ptr) 这个名字听起来很酷是不是?其实auto_ptr 只是C++标准库提供的一个类模板,它与传统的new/delete控制内存相比有一定优势,但也有其局限.本文总结的8个问题足以涵盖auto_ptr的大部分内容. auto_ptr是什么? auto_ptr 是C++标准库提供的类模板,auto_ptr对象通过初始化指向由new创建的动态内存,它是这块内存的拥有者,一块内存不能同时被分给两个拥有者.当auto_ptr对象生命周期结束时,其析构函数会将auto_ptr对象拥有

  • Linux中 sed 和 awk的用法详解

    sed用法: sed是一个很好的文件处理工具,本身是一个管道命令,主要是以行为单位进行处理,可以将数据行进行替换.删除.新增.选取等特定工作,下面先了解一下sed的用法 sed命令行格式为: sed [-nefri] 'command' 输入文本 常用选项: -n∶使用安静(silent)模式.在一般 sed 的用法中,所有来自 STDIN的资料一般都会被列出到萤幕上.但如果加上 -n 参数后,则只有经过sed 特殊处理的那一行(或者动作)才会被列出来. -e∶直接在指令列模式上进行 sed 的

  • 逻辑表达式中与或非的用法详解

    先说逻辑与(&&),它可以从三个层次进行理解 第一个层次最简单,就是简单的布尔值之间的逻辑与,就是左值和右值都是true时,返回true,两边都是false或者两边的值其中一边是fasle,就返回false:(AND操作): 第二个层次,(false,null,indefined,0,-0,NaN和""这些都是假值,其他所有的值包括对象都是真值),对这些"真值"和"假值"进行AND操作,返回一个"真值"或者&q

  • Vue.js 中的 v-show 指令及用法详解

    1 用法 v-show 指令通过改变元素的 css 属性(display)来决定元素是显示还是隐藏. html: <div id="app"> <p v-show="type==='科技'">大数据之下的锦鲤:为什么你的微博总抽不到奖</p> </div> js: <script> var app = new Vue({ el: '#app', data: { type:'技术' } }); </sc

  • .NET Core中Object Pool的多种用法详解

    前言 复用,是一个重要的话题,也是我们日常开发中经常遇到的,不可避免的问题. 举个最为简单,大家最为熟悉的例子,数据库连接池,就是复用数据库连接. 那么复用的意义在那里呢? 简单来说就是减少不必要的资源损耗. 除了数据库连接,可能在不同的情景或需求下,还会有很多其他对象需要进行复用,这个时候就会有所谓的 Object Pool(对象池). 小伙伴们应该也自己实现过类似的功能,或用ConcurrentBag,或用ConcurrentQueue,或用其他方案. 这也里分享一个在微软文档中的实现 Ho

随机推荐