html内容收缩代码,五种使用js/jq展开收缩方法代码

本页若无效果，需刷新页面，刷新我吧！

网页中展开收缩内容块是一个用得很频繁的功能，这往往离不开js和jq的实现，当然也不排除新元素html5的支持可以不用js来创建这一个功能。无论如何，展开和收缩有很多方法实现，就js来说都有多种写法。

1.首先看一下H5是怎么实现的：

展开/收缩

• 这是展开的我

注：其中表示默认展开

展开/收缩(请点这里)

这是展开的我

2.jq中slideToggle的使用：

点击我

• 看到点击的我了吧

$('.al_mon').click(function(){

$(this).next().slideToggle(200);

return false;

});

点击我(请点这里)

看到点击的我了吧

3.js通过改变css实现：

快点击我试试

• 秋叶就是我，我就是秋叶。

function click_a(divDisplay){

if(document.getElementById(divDisplay).style.display != "block"){

document.getElementById(divDisplay).style.display = "block";

}

else{document.getElementById(divDisplay).style.display = "none";}

}

快点击我试试

4.jq的的block和none:

笑一个

• 哈哈哈哈哈哈哈哈哈

$(function(){

$(".topicList span").click(function(){

var UL = $(this).next("ul");

if(UL.css("display")=="none"){

UL.css("display","block");

}

else{

UL.css("display","none");

} }); });

笑一个(请点这里)

哈哈哈哈哈哈哈哈哈

5.jq的hide和show:

下手要狠

• 要多狠有多狠

$(function(){

$(".ddd").toggle(function(){

$(this).next("ul").show();

},function(){

$(this).next("ul").hide();

});

});

下手要狠(请点这里)

要多狠有多狠