之前其實分享過幾篇關于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模板制作中，特別是搜索以及手機端菜單需要用到的點擊切換狀態代碼！