Html代码: 
  1. <div class="topicList"> 
  2. <h3><span>学习天地</span></h3> 
  3. <ul> 
  4. <li>1111111111</li> 
  5. <li>2222222222</li> 
  6. <li>333333333</li> 
  7. <li>4444444444</li> 
  8. <li>5555555555</li> 
  9. <li>6666666666</li> 
  10. </ul> 
  11. </div> 
Jquery代码: 
第一种实现方式: 
  1. <script type="text/javascript"> 
  2. $(function(){ 
  3. $(".topicList h3").click(function(){ 
  4. var UL = $(this).next("ul"); 
  5. if(UL.css("display")=="none"){ 
  6. UL.css("display","block"); 
  7. } 
  8. else{ 
  9. UL.css("display","none"); 
  10. } 
  11. }); 
  12. }); 
  13. </script> 
第二种实现方式: 
  1. <script type="text/javascript"> 
  2. $(function(){ 
  3. $(".topicList h3").toggle(function(){ 
  4. $(this).next("ul").hide(1000); 
  5. },function(){ 
  6. $(this).next("ul").show(1000); 
  7. }); 
  8. }); 
  9. </script> 
第三种实现方式: 
可以使用Jquery提供的show和hide来完成带缓动的显示和隐藏效果,由于两个方法相似,可以直接使用toggle来完成。 
  1. <script type="text/javascript"> 
  2. $(function(){ 
  3. $(".topicList h3").toggle(function(){ 
  4. $(this).next("ul").css("display","none"); 
  5. },function(){ 
  6. $(this).next("ul").css("display","block"); 
  7. }); 
  8. }); 
  9. </script> 
第四种实现方式: 
toggle如果有两个参数,并且都是函数,表示第一次点击执行第一个函数,第二次点击执行第二个函数。 
  1. <script type="text/javascript"> 
  2. $(function(){ 
  3. $(".topicList h3").toggle(topicHandler,topicHandler); 
  4. function topicHandler(){ //by www.jbxue.com
  5. //使用fadeIn、show、slideDown可以完成某个容器的显示 
  6. //使用fadeOut、hide、slideUp可以完成某个容器的隐藏 
  7. //所以可以通过各个的toggle来完成两个之间的轮换 
  8. $(this).next("ul").toggle(1000); 
  9. } 
  10. }); 
  11. </script> 

Jquery显示和隐藏的4种简单方法的更多相关文章

  1. WPF编程 ,TextBlock 显示百分数值的一种简单方法。

    原文:WPF编程 ,TextBlock 显示百分数值的一种简单方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/article/ ...

  2. jQuery显示和隐藏 常用的状态判断方法

    显示:show()  display:block; 隐藏:hide()   display:none; 当显示和隐藏切换的时候,需要判断此刻是显示还是隐藏,那判断条件常用以下几种方法: 1.if(th ...

  3. jquery 显示和隐藏的三种方式

     <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    & ...

  4. 利用来JS控制页面控件显示和隐藏有两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一:  1 2 document.getEle ...

  5. 【JQuery】jQuery(document).ready(function($) { });的几种表示方法及load和ready的区别

    jQuery中处理加载时机的几种方式 第一种: jQuery(document).ready(function() { alert("你好"); }); //或 $(documen ...

  6. 使用strace工具故障排查的5种简单方法

    使用strace工具故障排查的5种简单方法 本文源自5 simple ways to troubleshoot using strace strace 是一个非常简单的工具,用来跟踪可执行程序的系统调 ...

  7. js 与JQuery显示及隐藏方法

    虽然以后两种方式都能让文本信息隐藏和显示 第一种文本隐藏以后还是会占居位置, 第二种则不会占位置. <p id="p1">这是一段文本.</p> <i ...

  8. JQuery显示,隐藏和淡入淡出效果

    为了把JQuery搞熟悉,看着菜鸟教程,一个一个例子打,边看边记,算是一晚上的一个小总结吧.加油,我很本但是我很勤奋啊.系统的了解它,就要花时间咯. <!DOCTYPE html> < ...

  9. jQuery 显示与隐藏 tab选项卡

    方法一:使用display样式:block.none来控制文本的显示与隐藏 <div class="explain_text"> 移动互联网为企业提供了连接用户的新方式 ...

随机推荐

  1. Balanced Lineup 倍增思想到ST表RMQ

      Balanced Lineup Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 36864   Accepted: 172 ...

  2. javaEE学习笔记-单例模式

    定义: 确保一个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 单例模式的三要素: (1)私有的静态的成员变量 (2)私有的构造方法 (3)公共的静态的入口点方法 单例模式的分类: (1)饿 ...

  3. 【Java/Android性能优化1】Android性能调优

    本文参考:http://www.trinea.cn/android/android-performance-demo/ 本文主要分享自己在appstore项目中的性能调优点,包括同步改异步.缓存.La ...

  4. 【原创】利用C++ RAII技术自动回收堆内存

    [说明]这篇文章本来发布在我个人网站的博客上,但由于:1,打算以cnblogs为家了:2. 关于智能指针部分需要修订,所有将修订版发在这里,作为第一篇文章. 常遇到的动态内存回收问题 在C++的编程过 ...

  5. Oracle基础 (十一)字符串函数

    一.字符串函数 LENGTH(char1,char2) SELECT LENGTH('abc def gh') FROM dual; --获取字符串的长度,包含空格 结果: CONCAT(char1, ...

  6. asp.net mssqlserver 存储过程

    mssql server 返回多表结果集 mssqlserver 代码 create PROCEDURE [dbo].[gd] AS BEGIN , , END C#代码 using (SqlConn ...

  7. JAVA中的deflate压缩实现

    在文件的传输过程中,为了使大文件能够更加方便快速的传输,一般采用压缩的办法来对文件压缩后再传输,JAVA中的java.util.zip包中的Deflater和Inflater类为使用者提供了DEFLA ...

  8. Gulp 自动化的项目构建工具

    在很多场合都会听到前端工和 node 程师推荐 Grunt 来实现项目的自动化,自动化可以自动完成 javascript/coffee/sass/less 等文件的的测试.检查.合并.压缩.格式化.部 ...

  9. 初识 Asp.Net内置对象之Session对象

    Session对象 Session对象用于存储在多个页面调用之间特定用户的信息.Session对象只针对单一网站使用者,不同的客户端无法相互访问.Session对象中止联机机器离现时,,也就是当网站使 ...

  10. JavaScript--匿名函数和闭包(16)

    // 匿名函数:没有名字的函数; // 闭包:可访问一个函数作用域里的变量的函数; 一 匿名函数 // 普通函数 function box(){ // 函数名是box; return 'Lee'; } ...