当前位置: 秋叶网络博客 前端编程 ◊ 五种使用js/jq展开收缩方法代码

五种使用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="http://www.mizuiren.com" 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>
下手要狠(请点这里)
  • 要多狠有多狠

0
除非注明,文章均由 秋叶网络博客 发布,欢迎转载。
转载请注明本文地址:http://www.mizuiren.com/357.html
目录: 前端编程 | 标签: 展开收缩 | 11140次阅读