[代码收集]JQuery点击按钮展开/收起全部的折叠内容代码 - 笑忘书网页代码收藏馆 - 35230.WODEMO.COM

首页-代码 2014-01-25 04:51:11 -0500

★JQuery点击按钮展开/收起全部的折叠内容代码★

请勿抄袭本页面

代码说明

精简页面内容，需要时点击按钮即可查看隐藏内容，需加载JQuery插件。代码采自手机天极网导航页面

html代码

<style>
.navlayer{width:100%;margin:auto;}
.morebox{display:inline-block;}
.navlayer .morebox{width:98%;border:green 1px solid;background:#fff}
.navlayer a{display:inline-block;text-align:center;width:50%;padding-top:5px;padding-bottom:5px}
.navlayer button{font-size:16px;margin:5px 6px;border:1px solid #C2C3C6;padding:6px 0 7px;text-align:center;width:278px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;background:-webkit-gradient(linear,0 0,0 bottom,from(#FFFFFF),to(#DDE0E5));}
a.red:link,a.red:visited{color:#F00;}
</style>	  
<div class="navlayer">
		<div class="morebox">
		<div class="div2">
<a class="red" href="http://35230.wodemo.com">网页代码</a><a href="#">我的磨盘</a>
<a href="http://4nq.cn/tools/enter.aspx?id=15">站长江湖</a><a href="#">壁纸下载</a>
<a href="#">应用下载</a><a class="red" href="#">友情链接</a> 
</div>
<div style="display: none; " id="morelist" class="div2">
<a href="#">测试链接</a><a href="#">测试链接</a>
<a href="#">测试链接</a><a href="#">测试链接</a>
<a href="#">测试链接</a><a href="#">测试链接</a>
<a href="#">测试链接</a><a href="#">测试链接</a>
<a href="#">测试链接</a><a href="#">测试链接</a> 
<a href="#">测试链接</a><a href="#">测试链接</a>
 </div>
		<button id="navigationan">点击展开/收起全部</button>
		</div>
</div>
  <script type="text/javascript" src="http://35230.wodemo.com/entry/263243/e60bdf72a0579474c9b9b657d72b3e70/5892855.js"></script>
	  <script>
		  jQuery(document).ready(function($) {
		  $(document).ready(function(){
			$("#navigationan").click(function(){
				$("#morelist").slideToggle("slow");
			  });
			});
		  });
    </script>

5892855.js (91.67 KiB) | Read | Meta | +

代码演示

网页代码我的磨盘站长江湖壁纸下载应用下载友情链接

[代码仅供参考，转载请注明出处]

----Comments(2)----
笑忘书 (@35230) | @ at 2014-01-25 21:41:
到时去看看

翱翔的雄鹰 (@axdxy) | @ at 2014-01-25 08:44:
当乐网安卓页面也有一些东西可以借鉴。。。

Subscribe | Register | Login | N