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

当前位置：网站建设 > 技术支持

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

资料来源：网络整理时间：2023/3/4 0:56:21 共计：3628 浏览

之前其实分享过几篇关于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模板制作中，特别是搜索以及手机端菜单需要用到的点击切换状态代码！

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：position:relative与position:absolute组合使用_CSS学习 | ·下一条：jQuery点击显示隐藏（简单）_js/jQuery