我要评论html代码：
. 代码如下:
<p 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>
</p>
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>
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论