示例html
1
2 <div class="abc" style="display:none"></div>
<input type="button" class="but" />
最简单的方法:
1
2
3
4
5
6
7 <script>
$(document).ready(function(e) {
$(".but").click(function(e) {
$(".abc").toggle();
});搜索
});
</script>
toggle() 的作用就是当对象是显示的就隐藏,当是隐藏的则显示。
------
如果你除了显示和隐藏之外还需要同时实现其他功能的话,可以这样:
1
2
3
4
5
6
7
8
9
10
11
12
13
14 <script>
$(document).ready(function(e) {
$(".but").click(function(e) {
if( $(".abc").hasClass("show") ){
// 执行隐藏
$(".abc").hide().removeClass("show");
// 其他
}else{
// 显示
$(".abc").show().addClass("show");
}
});
});
</script>
这里通过自定义一个 class : show 来判断 div 是显示或隐藏
hasClass() 是否存在某个class
hide() 隐藏对象
show() 显示对象
removeClass() 移除一个class
addClass() 添加一个class
除此,还可以通过jquery设置这个 div 的 css : display:none/block 来实现隐藏/显示

jquery怎么实现点击一个按钮控制一个div的显示和隐藏的更多相关文章

  1. jquery实现点击控制div的显示和隐藏

    我们使用点击显示.点击隐藏的时候,一般有两种可选方案 .示例 html <div class="index"> <h1> 首页 </h1> &l ...

  2. 设置一个按钮为一个图片,不要border

    //设置一个按钮为一个图片,不要border ImageIcon searchIcon = ImageToolkit.loadImageIcon(/search.png"); ImageIc ...

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

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

  4. jquery判断div是否显示或者隐藏

    jquery判断div是否显示或者隐藏 很多时候会要判断一个div是不是显示着,没显示要怎么处理,显示的如何处理: 方法很简单,选择到你要判断的div,再用is(':hidden')判断是否隐藏:或者 ...

  5. JS控制HTML元素的显示和隐藏

    JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...

  6. 利用来JS控制页面控件显示和隐藏有两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一:  1 2 document.getEle ...

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

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

  8. 使用JavaScript控制HTML元素的显示和隐藏

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...

  9. 【读书笔记】iOS-storyBoard-为一个按钮添加一个点击事件

    按照故事板的用语,应用中的一个界面屏幕被称作一个”场景(Scene)",以后添加额外的场景时,停靠区中将有另一个部分. 一,新建立一个工程,如图所示. 二,选中Main.storyboard ...

随机推荐

  1. 小程序longpress的bug及其解决

    我的小程序中,用到一个长按修改的功能,设计是这样的,短按tap,长按longpress 但是,偶尔出现长按无效的情况.我自己都经常碰到,今天仔细研究,用半天时间反复寻找,重现,发现问题和内存或别的因素 ...

  2. fopen_s遇到的一个问题

    今天使用公司代码的日志模块记录程序运行的相关信息,发现日志总是只有两条记录,即程序启动和结束,别的都没有.跟踪了很久,终于发现是日志输出模块被我修改了一个地方:把fopen改成了fopen_s,毕竟报 ...

  3. [Python设计模式] 第16章 上班,干活,下班,加班——状态模式

    github地址:https://github.com/cheesezh/python_design_patterns 题目 用代码模拟一天的工作状态,上午状态好,中午想睡觉,下午渐恢复,加班苦煎熬. ...

  4. 网页出现400 Bad Request Request Header Or Cookie Too Large错误的解决方法

    在开发项目过程中,突然遇到400 Bad Request Request Header Or Cookie Too Large的报错,我也是第一次出现这样的错误,感觉还是挺新奇的. 分析下出现错误的原 ...

  5. 【PHP】PHP的安装和配置

    PHP(外文名:PHP: Hypertext Preprocessor,中文名:“超文本预处理器”)是一种通用开源脚本语言.语法吸收了C语言.Java和Perl的特点,利于学习,使用广泛,主要适用于W ...

  6. XAMARIN上运行IPHONE模拟器

    重装农药第32天!!! 今天弄XAMARIN运行IPHONE模拟器,前提是需要MAC 同时在开着,然后打开昨天 建立的HELLO WORLD项目,选择APP1.IOS,直接点右边的三角运行即可,他会自 ...

  7. [k8s]k8s的控制层kubelet+docker配合调度机制(k8架构)

    意外停掉一台node的kubelet,发现调度有问题,研究了下调度的细节 k8s架构 控制层- kubelet(配合节点docker工作) 数据层- kube-proxy 逻辑图: object 参考 ...

  8. linux epoll学习

    #include <sys/time.h> /* For portability */ #include <sys/select.h> int select(int nfds, ...

  9. 解决ubuntu下IntelliJ IDEA无法锁定到启动器的问题

    参考:https://www.zhihu.com/question/31626161 在目录~/.local/share/applications 中找到以前的IDEA的.desktop文件,删掉即可

  10. phpunit assert断言分类整理

    布尔类型 方法名 含义 参数 返回值 assertTrue 断言为真     assertFalse 断言为假     NULL类型 方法名 含义 参数 返回值 assertNull 断言为NULL ...