管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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>

教程首页 更多教程