今天做了一个关于多个栏目的隐藏与显示，内容为初始化显示6个栏目，点击按钮显示所有的栏目，在次点击隐藏出现的栏目

<div class="ftlt_z_navigation acer">
<div class="ftlt_padding">
<!--民生-->
<div class="civil_living">
<div class="ftlt_ty_navigation">
<h5><i class="iconfont icon-minsheng"></i>民生</h5>
<span class="onsert soso1"><i class="iconfont icon-chevron-down"></i></span>
</div>
<div class="ftlt_ty_naon">
<ul>
<li class="onset">
<a href="tieziliebiaoye.html">平台杂谈</a>
</li>
<li>
<a href="tieziliebiaoye.html">国际观察</a>
</li>
<li>
<a href="tieziliebiaoye.html">百姓声音</a>
</li>
<li>
<a href="tieziliebiaoye.html">法治论坛</a>
</li>
<li>
<a href="tieziliebiaoye.html">实话实说</a>
</li>
<li>
<a href="tieziliebiaoye.html">生活报道</a>
</li>
<li>
<a href="tieziliebiaoye.html">平台杂谈</a>
</li>
<li>
<a href="tieziliebiaoye.html">国际观察</a>
</li>
<li>
<a href="tieziliebiaoye.html">百姓声音</a>
</li>
<li>
<a href="tieziliebiaoye.html">法治论坛</a>
</li>
<li>
<a href="tieziliebiaoye.html">实话实说</a>
</li>
<li>
<a href="tieziliebiaoye.html">生活报道</a>
</li>
</ul>
</div>
</div>
<!--城市信息-->
<div class="City_Information">
<div class="ftlt_ty_navigation City">
<h5><i class="iconfont icon-chengshi1"></i>城市信息</h5>
<span class="soso1"><i class="iconfont icon-chevron-down"></i></span>
</div>
<div class="ftlt_ty_naon">
<ul>
<li class="onset">
<a href="tieziliebiaoye.html">平台杂谈</a>
</li>
<li>
<a href="tieziliebiaoye.html">国际观察</a>
</li>
<li>
<a href="tieziliebiaoye.html">百姓声音</a>
</li>
<li>
<a href="tieziliebiaoye.html">法治论坛</a>
</li>
<li>
<a href="tieziliebiaoye.html">实话实说</a>
</li>
<li>
<a href="tieziliebiaoye.html">生活报道</a>
</li>
<li>
<a href="tieziliebiaoye.html">平台杂谈</a>
</li>
<li>
<a href="tieziliebiaoye.html">国际观察</a>
</li>
<li>
<a href="tieziliebiaoye.html">百姓声音</a>
</li>
<li>
<a href="tieziliebiaoye.html">法治论坛</a>
</li>
<li>
<a href="tieziliebiaoye.html">实话实说</a>
</li>
<li>
<a href="tieziliebiaoye.html">生活报道</a>
</li>
</ul>
</div>
</div>
<!--财经-->
<div class="ftlt_Finance">
<div class="ftlt_ty_navigation Finance">
<h5><i class="iconfont icon-caijing"></i>财经</h5>
<span class="soso1"><i class="iconfont icon-chevron-down"></i></span>
</div>
<div class="ftlt_ty_naon">
<ul>
<li class="onset">
<a href="tieziliebiaoye.html">平台杂谈</a>
</li>
<li>
<a href="tieziliebiaoye.html">国际观察</a>
</li>
<li>
<a href="tieziliebiaoye.html">百姓声音</a>
</li>
<li>
<a href="tieziliebiaoye.html">法治论坛</a>
</li>
<li>
<a href="tieziliebiaoye.html">实话实说</a>
</li>
<li>
<a href="tieziliebiaoye.html">生活报道</a>
</li>
</ul>
</div>
</div>
<!--娱乐-->
<div class="ftlt_entertainment">
<div class="ftlt_ty_navigation entertainment">
<h5><i class="iconfont icon-yule1"></i>娱乐</h5>
<span class="soso1"><i class="iconfont icon-chevron-down"></i></span>
</div>
<div class="ftlt_ty_naon">
<ul>
<li class="onset">
<a href="tieziliebiaoye.html">平台杂谈</a>
</li>
<li>
<a href="tieziliebiaoye.html">国际观察</a>
</li>
<li>
<a href="tieziliebiaoye.html">百姓声音</a>
</li>
<li>
<a href="tieziliebiaoye.html">法治论坛</a>
</li>
<li>
<a href="tieziliebiaoye.html">实话实说</a>
</li>
<li>
<a href="tieziliebiaoye.html">生活报道</a>
</li>

</ul>
</div>
</div>
<!--情感-->
<div class="ftlt_emotion">
<div class="ftlt_ty_navigation emotion">
<h5><i class="iconfont icon-qinggan"></i>情感</h5>
<span class="soso1"><i class="iconfont icon-chevron-down"></i></span>
</div>
<div class="ftlt_ty_naon">
<ul>
<li class="onset">
<a href="tieziliebiaoye.html">平台杂谈</a>
</li>
<li>
<a href="tieziliebiaoye.html">国际观察</a>
</li>
<li>
<a href="tieziliebiaoye.html">百姓声音</a>
</li>
<li>
<a href="tieziliebiaoye.html">法治论坛</a>
</li>
<li>
<a href="tieziliebiaoye.html">实话实说</a>
</li>
<li>
<a href="tieziliebiaoye.html">生活报道</a>
</li>

</ul>
</div>
</div>
<!--时尚-->
<div class="ftlt_fashion">
<div class="ftlt_ty_navigation fashion">
<h5><i class="iconfont icon-shenghuoshishang"></i>时尚</h5>
<span class="soso1"><i class="iconfont icon-chevron-down"></i></span>
</div>
<div class="ftlt_ty_naon">
<ul>
<li class="onset">
<a href="tieziliebiaoye.html">平台杂谈</a>
</li>
<li>
<a href="tieziliebiaoye.html">国际观察</a>
</li>
<li>
<a href="tieziliebiaoye.html">百姓声音</a>
</li>
<li>
<a href="tieziliebiaoye.html">法治论坛</a>
</li>
<li>
<a href="tieziliebiaoye.html">实话实说</a>
</li>
<li>
<a href="tieziliebiaoye.html">生活报道</a>
</li>

</ul>
</div>
</div>
</div>
</div>

<script>
$(function(){
$(".ftlt_ty_naon").css({"height":"80px","overflow":"hidden"});
$(".ftlt_ty_navigation>span").click(function(){
if($(this).children("i").is('.icon-arrow_top')){
$(this).children("i").removeClass("icon-arrow_top").addClass("icon-chevron-down");
$(this).parent().next().css({"height":"80px","overflow":"hidden"});
}else if($(this).children("i").is('.icon-chevron-down')){
$(this).children("i").removeClass("icon-chevron-down").addClass("icon-arrow_top");
$(this).parent().next().css({"height":"auto","min-height":"80px","overflow":"hidden"});
}

// $(".ftlt_ty_naon>ul").css({"height":"80px","overflow":"hidden"});
})
})
</script>

设计图为

初始页面为：

最新文章

1. IE 浏览器各个版本 JavaScript 支持情况一览表
2. js实现当前导航菜单高亮显示
3. 第八章：Java集合
4. ajax 删除一条数据
5. asp.net mvc 部分视图加载区别
6. 固定虚拟机的IP
7. 25个完美的Opencart模板，让顾客无法抗拒！
8. opencv 批量图像读写
9. asp.net word内容读取到页面
10. 简单的setInterval应用
11. ImageView及其子类（二）
12. GPUImage滤镜效果翻译
13. 导航菜单点击图片切换--jquery
14. ubuntu 下redis的安装简介
15. sql查询表中重复数据个数
16. 上这个资源网站，让你轻松无忧找mac软件资源
17. Install/Remove of the Service Denied!
18. 第八次Scrum meeting
19. 监控JVM内存使用情况，剩余空间小于2M时报警
20. Java编程的逻辑 (69) - 线程的中断

热门文章

1. 用pytorch1.0快速搭建简单的神经网络
2. 剑指offer62：二叉搜索树的第k个结点，二叉搜索树【左边的元素小于根，右边的元素大于根】
3. centos可选的安装类型
4. java常用配置文件头部声明
5. 雷达无线电系列（三）经典CFAR算法门限因子alpha计算（matlab）
6. javascript进度条实现
7. java对日开发常用语(词汇)总结
8. CSS3浏览器私有属性
9. Cookie实现记住密码的功能
10. MacOS X GateKeeper Bypass