Jquery实现显示和隐藏的4种简单方式

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代码：
第一种实现方式：


代码如下:

1. <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>

第二种实现方式：


代码如下:

2. <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来完成。


代码如下:

3. <script type="text/javascript">
$(function(){
$(".topicList h3").toggle(function(){
$(this).next("ul").css("display","none");
},function(){
$(this).next("ul").css("display","block");
});
});
</script>

第四种实现方式：
toggle如果有两个参数，并且都是函数，表示第一次点击执行第一个函数，第二次点击执行第二个函数。


代码如下:

4. <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>

赞 (0)

相关推荐

  • jQuery实现判断控件是否显示的方法

    本文实例讲述了jQuery实现判断控件是否显示的方法.分享给大家供大家参考,具体如下: 核心代码: if($("#elem_id").is(":hidden")) { } 实例代码1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>

  • jquery判断元素是否隐藏的多种方法

    第一种:使用CSS属性 复制代码 代码如下: var display =$('#id').css('display'); if(display == 'none'){    alert("被你发现了,我是隐藏的啦!"); } 第二种:使用jquery内置选择器 假设我们页面有这么个标签, 复制代码 代码如下: <div id="test"> <p>仅仅是测试所用</p> </div> 那么,我们可以用以下语句来判断id

  • jquery设置控件位置的方法

    纯JS写法: 复制代码 代码如下: document.getElementById("child").style.left="800px";document.getElementById("child").style.top="200px";*/ //offset()获取当前元素基于浏览的位置   var offsettop=$("#unamespan").offset().top;    var offs

  • jQuery判断数组是否包含了指定的元素

    要判断数组中是否包含某个元素,从原理来来说,就是遍历整个数组,然后判断是否相等, 复制代码 代码如下: var arr = [ "xml", "html", "css", "js" ]; $.inArray("js", arr);  //返回 3, 如果不包含在数组中,则返回 -1; 以上就是本文的全部内容了,有需要的小伙伴参考下吧

  • jQuery判断元素是否是隐藏的代码

    核心代码: 复制代码 代码如下: if($("#elem_id").is(":hidden")) { } 实例代码1: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title

  • 基于jQuery的日期选择控件

    基于jQuery的日期选择控件

    但是也有些问题,第一画日历有点慢,第二兼容性不太好IE Only,第三它不是基于jQuery的哈哈. 那还是老规矩,做之前先看下效果   这下是更酷的Ext风格了. 从上图我们可以看出这个控件其实有两个视图一个日期月视图,还有一个是年月选择视图. 1:还是先从HTML入手 日期控件确定HTML其实还是比较简单,因为明摆着是列表的数据格式,当然主要是采用table了. 两个视图分别用两个Div包裹,控制div的显示隐藏即可以切换视图了.完整的HTMl结构大家可以用IEDeveloper看一下Dem

  • Jquery实现控件的隐藏和显示实例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • jQuery 判断元素上是否绑定了事件

    我研究了一下之后发现,jQuery都将事件缓存起来了,其实也是为了防止内存溢出以及页面unload的时候的速度,也包括多函数触发,方便管理等诸多好处,具体可以参考此文. jQuery会在window.unload的时候卸载所有绑定过的事件,释放内存的. OK,言归正传.判断元素上是否绑定过事件用如下语句 复制代码 代码如下: jQuery.data(elem,"events")[type] //老版本也能用 $(elem).data("events")[type]

  • JQuery显示、隐藏div的几种方法简明总结

    例子 复制代码 代码如下: $("#top_notice").css("display", "block");//第1种方法  //$("#top_notice").attr("style", "display:block;");//第2种方法  //$("#top_notice").show();//第3种方法 1.给元素换class,来实现隐藏div,前提是换的c

  • jQuery控制TR显示隐藏的几种方法

    网上有很多,这里介绍三种: 第一种方法,就是使用id,这个方法可以在生成html的时候动态设置tr的id,也是用得最多最简单的一种,如下: 这行不隐藏 这行要隐藏 这行要隐藏 那么控制显隐可以直接使用 for(var i = 1; i < tr_len; i++){ //tr_len是要控制的tr个数 $("#tr_"+i).hide(); } 第二种方法,是使用$.each(),这个方法需要设置table的id,如下: 这行不隐藏 这行要隐藏 这行要隐藏 那么控制显隐可以直接使

  • Jquery获得控件值的三种方法总结

    一 Jquery获得服务器控件值的方法由于ASP.NET网页运行后,服务器控件会随机生成客户端id,jquery获取时候不太好操作,google了下,总结有以下3种方法: 服务器控件代码:<asp:TextBox ID="txtUserID" runat="server"></asp:TextBox> 1. $("#<%=txtUserID.ClientID%>").val(); 2. $("inpu

  • datePicker——日期选择控件（with jquery）

    demo: http://demo.jb51.net/js/2011/jQuery_calendar/index.html down: http://www.jb51.net/jiaoben/19622.html 用法很简单,而且js文件也很小,之前也见过一些日期选择控件,但个头都比较大,影响速度可以设置日期的格式,可以选择日期的起止时间,如果不加参数的话,默认就是之前的日期不可选,而只能从今天开始选择 现在My97 DatePicker也不错,不用jquery 一款很不错的基于JavaScri

随机推荐