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

.示例 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. Mysql中的WITH ROLLUP用法

    1.WITH ROLLUP:在group分组字段的基础上再进行统计数据. 例子:首先在name字段上进行分组,然后在分组的基础上进行某些字段统计,表结构如下: CREATE TABLE `test` ...

  2. springboot、springsecurity、jwt权限验证

    1.背景 基于前后端分离项目的后端模块: 2.相关技术 springboot全家桶 web模块 security模块:用于权限的验证 mongodb 模块:集成mogodb模块 jwt 用于token ...

  3. Maven项目POM文件错误,提示“Plugin execution not covered by lifecycle configuration”的解决方案

    一. 问题 Plugin execution not covered by lifecycle configuration: org.apache.maven.plugins:maven-depend ...

  4. 折腾Java设计模式之解释器模

    解释器模式 解释器模式是类的行为模式.给定一个语言之后,解释器模式可以定义出其文法的一种表示,并同时提供一个解释器.客户端可以使用这个解释器来解释这个语言中的句子. 意图 给定一个语言,定义它的文法表 ...

  5. H5页面的高度宽度100%

    解决方案1: 设置如下:html,body{ min-height:100vh; background-color:#fff; }这样高度首先不会写死,而且满足最小高度是满屏 解决方案2: 可以用vh ...

  6. Laravel5多图上传和Laravel5单图上传的功能实现

    Laravel5文件上传默认只能上传一张图片,但是有的时候我们需要一次性上传多图就不行了,我在网上看了很多关于laravel5图片上传的文章,很多都只是介绍laravel5单图上传,多图片上传介绍少之 ...

  7. 将Dynamics 365中的用户及其角色、角色导出到Excel中

    关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复240或者20161204可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...

  8. EntityFramework实体默认值遇到Oracle自增主键

    1. Oracle实现主键自动增长 一般我们在Oracle实现主键自动增长,通常通过序列加触发器实现. 定义序列用于获取递增数字 CREATE SEQUENCE 序列名 [INCREMENT BY n ...

  9. 在本地硬盘安装WinPE系统,实现UEFI引导,摆脱U盘

    之前装系统一直用U盘装PE后再装系统,这次直接想把PE系统直接装在本地某个分区中,普通的PE制作工具只能直接装在一个硬盘里没法装在某个分区,百度发现没有一篇类似的文章,只能自己想办法了.目前的PE都支 ...

  10. pycharm设置自动换行的方法

    只对当前文件有效的操作:菜单栏->View -> Active Editor -> Use Soft Wraps: 如果想对所有文件都有效,就要在setting里面进行操作:File ...