今天做了一个关于多个栏目的隐藏与显示，内容为初始化显示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>
设计图为
初始页面为：
)
