示例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. 一句话Javascript实现价格格式化

    //小数点后面如果超过3位则转换错误,如1.1234 正确的是1.1234但却错误的转换成了1.1,234 var test1 = '1234567890.123' var format = test ...

  2. DroneCI启用privileged

    https://www.aliyun.com/jiaocheng/123155.html?spm=5176.100033.2.5.EIV4p6 drone的服务需要配置DRONE_ADMIN环境变量, ...

  3. 每天一个linux命令(17):whereis

    1.命令简介         whereis (whereis) 命令用来定位指令的二进制程序.源代码文件和man手册页等相关文件的路径.         whereis命令只能用于程序名的搜索,而且 ...

  4. Unitek的USB3.0 TF卡读卡器

    淘宝买了个Unitek的usb3.0读卡器, 用来换掉之前用了很久sks的sub2读卡器, 收到之后在Ubuntu下先测了一下, 发现识别出来的是usb2.1 lsusb -D /dev/bus/us ...

  5. Git-Book

    关于git的文档https://git-scm.com/book/zh/v2

  6. 修改Linux用户配置之后先验证再退出

    在服务器上更改完zsh.SSH连接属性.用户密码之后,我们可能想退出重新登录查看是否配置生效.这时,有一个注意事项:不要关闭旧窗口,而是重新打开一个新窗口尝试登录.否则,如果配置改错了,自己就再也没有 ...

  7. inode满引发不能写文件的问题

    一.引言: 二.文件解决: 三.inode概念: 四.尾声:

  8. invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

    Mac系统升级git会找不到并且报错:xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools) ...

  9. Android Api 27 在 Android 8.0 上出现 Only fullscreen opaque activities can request orientation 的解决情况

    刚上班,没有业务开发,对 App 的 Api 由 26 升级到了 27, 结果在 Android 8.0 的设备上会出现 crash . Log 如下: java java.lang.IllegalS ...

  10. Linux服务器重启后eureka报错

    在Linux服务器重启后,首次启动应用时查看eureka注册中心,报错 EMERGENCY! EUREKA MAY BE INCORRECTLY CLAIMING INSTANCES ARE UP W ...