toggle显示与隐藏切换

jQuery中显示与隐藏切换toggle方法

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="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>
上一篇:IOS开发之—— 在AFN基础上进行的网络请求的封装


下一篇:2.2、Hibernate用注解方式实现一对多、多对多关系