jQuery(最优)点击切换显示隐藏状态，点击显示隐藏菜单，.click切换

之前其实分享过几篇关于JS切换显示、隐藏状态的方法，罗列一下：

1、jQuery点击显示隐藏（简单）

2、jQuery：点击显示隐藏、横向淡入淡出

3、jQuery 点击显示隐藏CSS - toggleClass() 方法

4、即插即用 点击 下拉菜单 javascript

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模板制作中，特别是搜索以及手机端菜单需要用到的点击切换状态代码！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！