今天做了一個關于多個欄目的隱藏與顯示，內容為初始化顯示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>

設計圖為

初始頁面為：

?

轉載于:https://www.cnblogs.com/li-sir/p/7168650.html

總結

以上是生活随笔為你收集整理的jquery关于多个显示隐藏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。