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

设计图为

初始页面为：