五种使用js/jq展开收缩方法代码

作者：秋了秋发表时间：2015年06月25日

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

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

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

<details>
<summary>展开/收缩</summary>
<ul><li>这是展开的我</li></ul>
</details>

注：其中<details open>表示默认展开

展开/收缩(请点这里)

这是展开的我

2.jq中slideToggle的使用：

<div class="al_mon">点击我</div>
<ul style="display:none"><li>看到点击的我了吧</li></ul>
<script>
$('.al_mon').click(function(){
$(this).next().slideToggle(200);
return false;
});
</script>

点击我(请点这里)

3.js通过改变css实现：

<div onclick="return click_a('wp_wuover')"><a>快点击我试试</a></div>
<ul id="wp_wuover" style="display: none;color:red;">
<li><a href="//netblog.cn" title="点击他">秋叶就是我，我就是秋叶。</a></li>
</ul>
<script>
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:

<div class="topicList">
<span>笑一个</span>
<ul style="display:none;">
<li>哈哈哈哈哈哈哈哈哈</li>
</ul>
</div>
<script>
$(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:

<div class="ddd">下手要狠</div>
<ul style="display:none"><li>要多狠有多狠</li></ul>
<script>
$(function(){
$(".ddd").toggle(function(){
$(this).next("ul").show();
},function(){
$(this).next("ul").hide();
});
});
</script>

下手要狠(请点这里)