之前其实分享过几篇关于JS切换显示、隐藏状态的方法，罗列一下：
3、jQuery 点击显示隐藏CSS - toggleClass() 方法
5、案例：jQuery文本段落展开和折叠效果/点击查看更多、点击隐藏（*）
6、即插即用：JS 点击“显示全部”、点击隐藏/折叠部分区域文字 - 特效代码
以上6种方法都可以实现点击切换显示隐藏状态！
但今天分享这个是基于1，2，3，4，综合起来最优方案，如下图：
代码分享：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="
http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
" type="text/javascript"></script>
<link href="
http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
" rel="stylesheet">
</head>
<style>
.nav-search i{color:#0A15E3;font-size: 42px;}
.nav-search .fa-remove{color: #f35;}
.search{display: none;}
/*=====*/
.nav{float: right;}
.nav i{width: 40px;height: 40px;display: inline-block; }
.nav .san{background: url(nav.png) no-repeat center; background-position: 0 0;}
.nav .cha{background: url(nav.png) no-repeat center;background-position: 0 -40px;}
.navbar{display: none;overflow: hidden}
</style>
<body>
<!---->
<div style="float: left">
<span class="nav-search"><i class="fa fa-search"></i></span>
<div class="search">这是隐藏的搜索代码<br>点击显示、点击隐藏<br>使用图标字体切换+变色</div>
</div>
<!---->
<div style="float: right">
<span class="nav"><i class="san"></i></span>
<div class="navbar">这里显示下拉菜单<br>图标使用一体背景图片<br>切换起来比较顺利</div>
</div>
<script>
$(".nav-search").click(function(){//搜索JS
$(".nav-search i").toggleClass("fa-remove");//点击状态改变css
$(".search").slideToggle(100);
});
$(".nav").click(function(){
$(".nav i").toggleClass("cha");
$(".navbar").slideToggle(100);
// $(".navbar").remove
// $(".nav i").removeClass("san");
});
</script>
</body>
</html>注：其中背景图片：
本篇文章分享的才是最适合用在现代各种模板制作中的点击切换状态代码，依赖jQuery，代码简洁！这也是未来我要用在所有的zblog模板制作中，特别是搜索以及手机端菜单需要用到的点击切换状态代码！