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