jQuery Mobile

显示jquery代码的四种方式

时间:2024-10-31 21:12:15 jQuery Mobile 我要投稿
  • 相关推荐

显示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>

【显示jquery代码的四种方式】相关文章:

网球进攻的四种方式06-09

提高领导力的四种思维方式05-19

设置双显示器显示的方法11-17

数控编程代码大全02-13

Java代码的基本知识09-03

网页滚动文字的制作HTML代码04-10

显示器的维护方法06-29

音的四种性质12-30

浅谈声乐的四种唱法04-18

竞走的正确方式08-16