显示与隐藏切换toggle方法
来源:互联网 发布:现代通信网络试题答案 编辑:程序博客网 时间:2024/05/16 23:56
show与hide是一对互斥的方法。需要对元素进行显示隐藏的互斥切换,通常情况是需要先判断元素的display状态,然后调用其对应的处理方法。比如显示的元素,那么就要调用hide,反之亦然。 对于这样的操作行为,jQuery提供了一个便捷方法toggle用于切换显示或隐藏匹配元素
基本的操作:toggle();
这是最基本的操作,处理元素显示或者隐藏,因为不带参数,所以没有动画。通过改变CSS的display属性,匹配的元素将被立即显示或隐藏,没有动画。
- 如果元素是最初显示,它会被隐藏
- 如果隐藏的,它会显示出来
display属性将被储存并且需要的时候可以恢复。如果一个元素的display值为inline,然后是隐藏和显示,这个元素将再次显示inline
提供参数:.toggle( [duration ] [, complete ] )
同样的提供了时间、还有动画结束的回调。在参数对应的时间内,元素会发生显示/隐藏的改变,在改变的过程中会把元素的高、宽、不透明度进行一系列动画。这个元素其实就是show与hide的方法
直接定位:.toggle(display)
直接提供一个参数,指定要改变的元素的最终效果
其实就是确定是使用show还是hide方法
if ( display === true ) { $( "elem" ).show();} else if ( display === false ) { $( "elem" ).hide();}
toggle方法就是show与hide的相互切换的一个快捷方法:
<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> div { width: 500px; height: 50px; padding: 5px; margin: 5px; float: left; border: 1px solid #ccc; } .left { background: #bbffaa; } .right { background: yellow; display: none; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body> <h2>通过toggle切换显示与隐藏</h2> <div class="left">显示到隐藏</div> <div class="right">隐藏到显示</div> <button>直接show-hide动画</button> <button>直接hide-show动画</button> <script type="text/javascript"> $("button:first").click(function() { $(".left").toggle(3000) }); </script> <script type="text/javascript"> $("button:last").click(function() { $(".right").toggle(3000) }); </script></body></html>
0 0
- 显示与隐藏切换toggle方法
- toggle()切换显示隐藏
- jquery中toggle()方法的使用(隐藏与显示的切换)
- 使用toggle()方法进行显示隐藏
- 使用toggle()方法进行显示隐藏
- jquery内容显示与隐藏; toggle()使用
- JQuery的toggle函数(元素隐藏和显示的切换)
- toggle()-显示隐藏控件
- jquery 显示隐藏div方法show(),hide(),toggle(),slideDown()总结
- jquery 显示隐藏div方法show(),hide(),toggle(),slideDown()总结
- jquery的toggle实现文字隐藏与显示
- 一个按钮控制div的显示与隐藏。运用jquery的toggle双、多事件绑定方法
- web前端,竖直,水平菜单总结2,toggle()显示隐藏切换
- JQuery 显示隐藏动画( show(),hide(),toggle() )
- 很实用的jQuery事件 - toggle() 方法,简单实现显示隐藏的功能
- android 密码显示与隐藏的切换
- 切换CSS3实现隐藏与显示效果
- hover方法和toggle方法切换事件
- Java源码-温度转换小程序(Temperature Conversion)
- VB程序学习代码记录20160801
- Effective C++_Item7笔记
- 可变数组的追加,插入,删除,替换
- 链接式编程
- 显示与隐藏切换toggle方法
- 使用json web token
- Autocompletetextview的简单使用
- 下拉动画slideDown
- Java Swing-JTable中的单元格拆分与合并
- SQLserver的事务,索引,视图,函数,存储过程
- Jemeter中的断言
- mybatis入门之二、使用接口interface
- linux命令tmux