Jquery实现显示和隐藏的4种简单方式
2015-10-26 13:39
645 查看
显示和隐藏的效果想必大家都有见到过吧,其实很简单,通过jquery便可轻松实现,下面为大家整理了4种方式,大家可以根据需求自由选择
Html代码:
Jquery代码:
第一种实现方式:
第二种实现方式:
第三种实现方式:
可以使用Jquery提供的show和hide来完成带缓动的显示和隐藏效果,由于两个方法相似,可以直接使用toggle来完成。
第四种实现方式:
toggle如果有两个参数,并且都是函数,表示第一次点击执行第一个函数,第二次点击执行第二个函数。
Html代码:
<div class="topicList"> <h3><span>学习天地</span></h3> <ul> <li>1111111111</li> <li>2222222222</li> <li>333333333</li> <li>4444444444</li> <li>5555555555</li> <li>6666666666</li> </ul> </div>
Jquery代码:
第一种实现方式:
<script type="text/javascript"> $(function(){ $(".topicList h3").click(function(){ var UL = $(this).next("ul"); if(UL.css("display")=="none"){ UL.css("display","block"); } else{ UL.css("display","none"); } }); }); </script>
第二种实现方式:
<script type="text/javascript"> $(function(){ $(".topicList h3").toggle(function(){ $(this).next("ul").hide(1000); },function(){ $(this).next("ul").show(1000); }); }); </script>
第三种实现方式:
可以使用Jquery提供的show和hide来完成带缓动的显示和隐藏效果,由于两个方法相似,可以直接使用toggle来完成。
<script type="text/javascript"> $(function(){ $(".topicList h3").toggle(function(){ $(this).next("ul").css("display","none"); },function(){ $(this).next("ul").css("display","block"); }); }); </script>
第四种实现方式:
toggle如果有两个参数,并且都是函数,表示第一次点击执行第一个函数,第二次点击执行第二个函数。
<script type="text/javascript"> $(function(){ $(".topicList h3").toggle(topicHandler,topicHandler); function topicHandler(){ //使用fadeIn、show、slideDown可以完成某个容器的显示 //使用fadeOut、hide、slideUp可以完成某个容器的隐藏 //所以可以通过各个的toggle来完成两个之间的轮换 $(this).next("ul").toggle(1000); } }); </script>
相关文章推荐
- jquery reset form/submit form
- jQuery学习之旅 Item3 属性操作与样式操作
- jQuery学习之旅 Item3 属性操作与样式操作
- layer官方演示与讲解(jQuery弹出层插件)
- jQuery学习之旅 Item4 细说DOM操作
- jQuery学习之旅 Item4 细说DOM操作
- 夺命雷公狗jquery---19事件切换hover
- jquery.trim() vs JS.trim()
- jQuery中的HTML操作
- <<锋利的jQuery>>样例改进利用, html文本输入框得到与失去输入焦点的提示信息显示切换函数
- js和jquery中的事件委托
- JQuery对CheckBox的一些相关操作
- jquery&easyui
- jQuery插件
- jquery获取url参数及url加参数的方法
- jQuery Ajax 实例 ($.ajax、$.post、$.get)
- jquery on off 方法
- 夺命雷公狗jquery---18jquery中常用属性(方法)
- 夺命雷公狗jquery---17页面载入的三种方法
- 夺命雷公狗jquery---16文本与值的设置