我们使用点击显示、点击隐藏的时候,一般有两种可选方案

.示例 html

    <div class="index">
<h1>
首页
</h1>
<button id="btn">点击</button>
</div>

最简单的方法:toggle()   点击显示 h1 和 点击 隐藏 h1

        $(function () {
$("#btn").click(function () {
$("h1").toggle();
})
})

toggle() 的作用就是当对象是显示的就隐藏,当是隐藏的则显示。 
<—————–>

果你除了显示和隐藏之外还需要同时实现其他功能的话,可以这样:

        $(function () {
$("#btn").click(function(){
// 如果h1是显示的
if($("h1").hasClass("show")){
// 执行隐藏
$("h1").hide().removeClass("show");
// 其他
}else{
// 显示
$("h1").show().addClass("show");
}
})
})

这里通过自定义一个 class : show 来判断 div 是显示或隐藏

hasClass() 是否存在某个class

hide() 隐藏对象

show() 显示对象

removeClass() 移除一个class

addClass() 添加一个class

除此,还可以通过jquery设置这个 div 的 css : display:none/block 来实现隐藏/显示

jquery实现点击控制div的显示和隐藏的更多相关文章

  1. 简简单单,jquery中,使用checkbox控制div的显示与隐藏

    今天开发代码时,发现好久不用jquery就生疏了. 所以作这个记录, 使用checkbox控制div的显示与隐藏. 一,html代码处: <input type="checkbox&q ...

  2. 微信小程序点击控制元素的显示与隐藏

    微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view cla ...

  3. 原生JS的移入溢出控制div的显示与隐藏

    原生JS的移入溢出控制div的显示与隐藏的写法 上面的写法火狐存在兼容性

  4. js控制div样式显示与隐藏,JS通过点击超链接右边(指定位置)显示一个图标

    原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...

  5. 仅使用css实现点击 控制元素的显示与隐藏!

    视频教程:https://www.bilibili.com/video/BV1uE411Q7tx?p=15&spm_id_from=pageDriver 大致方法:在被点击的元素后面 放一个c ...

  6. jquery控制css的display(控制元素的显示与隐藏)

    使用jquery控制div的显示与隐藏: $("#div的id").show()表示display:block, $("#div的id").hide()表示di ...

  7. jquery控制元素的显示与隐藏

    比如要控制div的显示与隐藏,一句话就搞定了.$("#id").show()表示display:block,$("#id").hide()表示display:n ...

  8. jquery怎么实现点击一个按钮控制一个div的显示和隐藏

    示例html 1 2 <div class="abc" style="display:none"></div> <input ty ...

  9. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. JavaScript技巧(未完成)

    1.在js脚本语言中使用HTML语言中的< >号,但是在XHTML中却不能使用这类符号,可以将<号转换成&lt符号(XHTML比HTML跟严格),这种做法比较不好理解,可以用 ...

  2. 浏览器登录Dynamics 365 CE没毛病,程序连接却报错。

    摘要: 微软动态CRM专家罗勇 ,回复308或者20190308可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . 今天我做实验 ...

  3. 12月16日广州.NET俱乐部下午4点爬白云山活动

    正如我们在<广州.NET微软技术俱乐部与其他技术群的区别>和<广州.NET微软技术俱乐部每周三五晚周日下午爬白云山活动>里面提到的, 我们会在每周三五晚和周日下午爬白云山.   ...

  4. 从零学习Fluter(三):Flutter的路由跳转以及state的生命周期

    今天继续研究Flutter,我是在flutter1.0发布后,才玩flutter的,发现在此之前,许多人已经先发制人,玩起了flutter,不知不觉中,我已经被别人摔在了起跑线上,玩过flutter后 ...

  5. Android Studio 代码无提示,无颜色区分

    一.问题 ①java代码没有颜色区分,统一黑色 ②代码不会联想提示,原来打前几个字母便会联想到后面的内容 二.解决 打开File,将Power save Mode的勾勾去掉

  6. ADOConnection断线重连

    问题: ADOConnection断线重连问题描述: 使用ADOConnection连接oracle数据库,开始正常,当网络断开时数据库连接失败(此时查询ADOConnection.connected ...

  7. Oracle database link中查询会开启事务吗?

    关于oracle database link,使用database link相关的查询语句是否会开启事务呢?我们知道,在数据库中一个简单的SELECT查询语句不会产生事务(select for upd ...

  8. 修改vue element Transfer 穿梭框里内容区的宽度

    <template> <el-transfer v-model="value1" :data="data"></el-transf ...

  9. LeetCode算法题-Reverse Words in a String III(Java实现)

    这是悦乐书的第259次更新,第272篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第126题(顺位题号是557).给定一个字符串,您需要反转句子中每个单词中的字符顺序,同 ...

  10. LeetCode算法题-Minimum Moves to Equal Array Elements(Java实现)

    这是悦乐书的第233次更新,第246篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第100题(顺位题号是453).给定大小为n的非空整数数组,找到使所有数组元素相等所需的 ...