toggle_togglebutton - CSDN
精华内容
参与话题
  • 使用toggle()方法进行显示隐藏

    千次阅读 2015-12-24 09:52:21
    $(document).ready(function(){ ... $("p").toggle(); //toggle()方法进行显示隐藏交互事件,如果显示的就进行隐藏,如果是隐藏的就显示 }); $(".btn2").toggle(2000,function(){ $(".div2").toggle(); //
    <html> 
    <head> 
    <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript"> 
    $(document).ready(function(){ 
      $(".btn1").click(function(){ 
      $("p").toggle(); //toggle()方法进行显示隐藏交互事件,如果显示的就进行隐藏,如果是隐藏的就显示 
      }); 
      $(".btn2").toggle(2000,function(){ 
         $(".div2").toggle(); //callback
       }); 
    }); 
    </script> 
    </head> 
    <body> 
    <p>This is a paragraph.</p> 
    <button class="btn1">Toggle</button> 
    <button class="btn2">Toggle2</button> 
    <div class="div1">234</div> 
    <div class="div2"  style="display:none">2345</div> 
    </body> 
    </html>

    定义和用法

    toggle() 方法切换元素的可见状态。

    如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。

    语法

    $(selector).toggle(speed,callback,switch)
    参数 描述
    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方法的过程中,怎么知道现在的状态是show还是hide,目测吗?肯定是不行的。正确的方法是使用is方法判断是否是hidden状态。例如:
     代码如下 复制代码

    if($("#phpernote").is(":hidden")){
     //当前是hide状态
    }else{
     //当前是show状态
    }

    上面也可以使用slideToggle代替

     代码如下 复制代码

    $(this).slideToggle("slow",function(){
    if ($(this).is(':hidden')) {
    alert("hidden");
    }
    });

    使用回调函数来进行判断当前元素是否隐藏。

    重设toggle状态

     代码如下 复制代码

    $('#toggled').toggle(fn1, fn2);
    $('#clear').click(function() {
            $('#toggled').unbind('click').toggle(fn1, fn2);
    });

    例子,鼠标单击某个按钮或某一元素时,使另一个元素隐藏和显示

    jQuery中的 toggle()很简单的替我们办到了;
    之前我们会用到两个按钮bnt1和btn2:

     代码如下 复制代码
    $(".btn1").click(function(){ $("p").hide();});$(".btn2").click(function(){ $("p").show();});
    使用toggle()后:直接点击就可以达到显示和隐藏效果;
    $(".btn1").click(function(){ $("p").toggle();});

    展开全文
  • jq的toggle的使用

    2018-09-06 20:14:10
    先说一下需求,在需求中把用法讲解一下:通过一个按钮实现隐藏和显示图片! toggle(),是用来显示和隐藏元素的属性; 代码献上:  

    先说一下需求,在需求中把用法讲解一下:通过一个按钮实现隐藏和显示图片!

    toggle(),是用来显示和隐藏元素的属性;

    代码献上:

     

    展开全文
  • toggle()

    2019-07-11 03:48:56
    jQuery hide() 和 show() 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ ...$("button").click...

    jQuery hide() 和 show()

    通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:

    $("#hide").click(function(){
      $("p").hide();
    });
    
    $("#show").click(function(){
      $("p").show();
    });

    $("button").click(function(){
      $("p").hide(1000);
    });
    
    

    jQuery toggle()

    通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

    显示被隐藏的元素,并隐藏已显示的元素:

    实例

    $("button").click(function(){
      $("p").toggle();
    });


    http://www.w3school.com.cn/jquery/jquery_hide_show.asp

    转载于:https://www.cnblogs.com/Ly426/p/10299226.html

    展开全文
  • toggle()事件

    千次阅读 2018-07-03 14:57:46
    .addclass('name') 将会向选择的目标添加class属性toggle()事件 会自动获得当前对象的显示或者隐藏状态,并且使用触发事件进行切换。例如:$("idname").click(function(){//绑定点击事件 $(this).toggle...
    .addclass('name') 将会向选择的目标添加class属性
    toggle()事件 会自动获得当前对象的显示或者隐藏状态,并且使用触发事件进行切换。

    例如:

    $("idname").click(function(){//绑定点击事件
     $(this).toggle();//进行显示 隐藏替换
    });

    方式1:

        允许传入的参数:speed   即就是动画执行的速度,可以是数字 数字字符串   也可以是预设的slow normal fast 。

        callback   可选函数 在动画执行结束时调用。

    方式2:

        之传入一个参数:condition     布尔值   当键入 true 时显示元素,当键入false时隐藏文件。












    展开全文
  • Unity 学习笔记五 学习资料:《Unity 3D游戏开发》 宣雨松 Toggle控件用来创建一个开关按钮,跟单选框一样。其返回值为bool类型。 例子 Toggle(开关按钮)技术文档: 最后,虽然我写的学习笔记很没有技术含量,基本...
  • JQuery中toggle被淘汰后的替代方法

    万次阅读 2018-06-19 17:52:29
    今天使用toggle()方法的多函数切换功能来实现时间控件的开关切换效果,在浏览器浏览效果正常,在手机端页面就无法加载出来,估计是toggle()在手机端无法支持,使用以下方式解决。在最新的jQuery的程序库中jquery-...
  • [UGUI基础]Toggle

    千次阅读 2017-11-13 23:57:36
    Toggle:单选框;开关可以将多个Toggle按钮加入一个组,则他们之间只能有一个处于选中状态(Toggle Group上Allow Switch Off设为false)。Toggle和Button类似,只是Toggle有一个开和关的状态。1.Toggle组件,面板上...
  • toggle操作

    2017-05-25 21:13:33
    当用户为文章点赞、收藏等操作时,可以使用toggle操作。1 建立数据库表php artisan make:migration create_posts_table --create=posts php artisan make:migration create_favorites_table --create=favorites2...
  • toggle()方法

    2019-07-26 00:03:32
    toggle()方法中,可以依次调用N个指定的函数。直到最后一个函数,然后重复对这些函数轮番调用。toggle()方法的功能是每次单机后依次调用函数,请注意到“依次”这两个字,说明该方法在调用函数时并非随机或指定...
  • Unity UGUI(六)Toggle(开关/切换)

    万次阅读 2019-05-15 15:20:36
    Toggle(Script) Interactable 可交互 是否可点击 Transition 过渡 None:无 Color Tint:颜色色彩 Target Graphic:目标图形 Normal Color:正常颜色 Highlighted Color...
  • js 原生 实现 toggle()

    千次阅读 2018-03-16 10:43:04
    css &lt;style&gt; .show{ opacity: 0; visibility: hidden; transition: all 2s linear; background: red; } .hide{ visibility:...
  • Unity UGUI基础之Toggle

    万次阅读 2017-02-22 15:51:33
    Toggle组合按钮(单选框),可以将多个Toggle按钮加入一个组,则他们之间只能有一个处于选中状态(Toggle组合不允许关闭的话)。 一、Toggle组件: Toggle大部分属性等同于Button组件,同为按钮,不同的只是他...
  • bootstrap 中的data-toggle="

    万次阅读 多人点赞 2014-08-27 11:24:35
    在自学Bootstrap的时候遇到了这个属性,自己查了下各种资料,下面是我自己的
  • bootsrap之data-toggle="

    万次阅读 2018-05-08 20:26:37
    bootsrap之data-toggle=""在自学Bootstrap的时候遇到了这个属性,自己查了下各种资料,下面是我自己的理解,有问题请指教。bootstrap 中的data-toggle=""这个明面上的意思是数据切换,下面我举...
  • bootstrap data-toggle

    万次阅读 2016-09-13 11:39:50
    Bootstrap为这些a之类元素都绑定上了事件,而终止了...data-toggle指以什么事件触发,常用的如modal,popover,tooltips等,data-target指事件的目标,一起使用就是代表data-target所指的元素以data-toggle指定的形式显示
  • data-toggle与data-target是什么作用

    万次阅读 2017-02-23 13:54:42
    data-toggle指以什么事件触发,常用的如modal,popover,tooltips等,data-target指事件的目标,一起使用就是代表data-target所指的元素以data-toggle指定的形式显示 data-target 与data-toggle 还有data-...
  • Unity toggle的使用方法

    千次阅读 2017-02-22 15:14:42
    FR:海涛高软(QQ技术交流群:386476712)
  • bootstrap中dropdown-toggle的使用

    千次阅读 2018-07-16 22:08:11
    dropdown解决下拉菜单问题,在使用时需要dropdown.js插件,调用方法如下:
  • UGUI有一个Toggle组件 用来制作一个可勾选的选项
  • Unity中UGUI的Toggle控件

    万次阅读 2017-08-29 19:51:32
    Toggle控件
1 2 3 4 5 ... 20
收藏数 105,126
精华内容 42,050
关键字:

toggle