初初认识jQuery的not选择器，想要实现的功能是，点击第一个div，显示第二个div，点击第一个div以外的地方，隐藏第二个div。

具体代码如下：

<!DOCTYPE html>

<html>

<head>

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("#btn").click(function(){

   $("#holder").toggle();

  });

  $(":not(#btn)").mouseup(function(){

    $("#holder").hide();

  });

});

</script>

</head>

<body>

<h1>Welcome to My Homepage</h1>

<div id="btn" style="cursor: pointer;">我是按钮</div>

<div id="holder" style="background-color:lightblue;">

<p>I live in Duckburg.</p>

<p>My best friend is Mickey.</p>

</div>

</body>

</html>

需要注意的是，两个不能同时触发click事件;div1调用了toggle()方法不能隐藏，只能调用show()。

Jquery not选择器实现元素显示隐藏的更多相关文章

  1. js获取元素显示隐藏的当前状态

    js获取元素显示隐藏的当前状态 // CSS var display = $("."+cls).css("display"); if(display == &q ...

  2. jQuery使用toggle()方法进行显示隐藏

    转自:https://www.cnblogs.com/sosoft/p/3460556.html 这是一个示例: 1 <html> 2 <head> 3 <script ...

  3. 基于jquery封装通用的控制显示隐藏的方法

    应用场景 在项目中会存在大量这样的需求: 1.选择不同的radio单选框,页面上的部分内容随之显示隐藏 2.选择不同的option下拉框内容,页面上的部分内容随之显示隐藏 如果每次遇到这类需求都单独写 ...

  4. jQuery Mobile 控制 select 的显示隐藏 display none

    如需要动态控制下拉选择菜单select的显隐,一般考虑使用display:none这个方法. 但在jQueryMobile中的select添加自定义的css,display:none 是无效的. 解决 ...

  5. jquery的toggle动画效果显示隐藏

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 利用JavaScript的if语句判断元素显示隐藏

    <html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...

  7. jquery可见性选择器（匹配所有隐藏的元素）

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

  8. JQuery 控制元素显示隐藏

    JS在浏览器里面做调试的时候,先在浏览器里面找到页面代码加上断点来执行.然后根据执行情况来查找部分变量是否能找到,一点一点的排查内容.可以做筛选条件 部分隐藏.默认让部分条件加上.hide 默认隐藏, ...

  9. jQuery入门——实现列表的显示隐藏与实现轮播图

    列表的显示与隐藏 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...

随机推荐

  1. linux内核数据结构--进程相关

    linux里面,有一个结构体task_struct,也叫“进程描述符”的数据结构,它包含了与进程相关的所有信息,它非常复杂,每一个字段都可能与一个功能相关,所以大部分细节不在我的研究范围之内,在这篇文 ...

  2. myeclipse building workspace如何禁止及提高myeclipse速度

    大家一定对building workspace时那缓慢的速度给困扰到了吧~ 其实只要把project选项里的 building automatically前的勾去掉,就可以快很多了.. 另外大家一定对 ...

  3. Hibernate中inverse属性与cascade属性

    Hibernate集合映射中,经常会使用到"inverse"和"cascade"这两个属性.对于我这样,Hibernate接触不深和语文水平够烂的种种因素,发现 ...

  4. Btrace

    http://www.iteye.com/topic/1005918 背景 周五下班回家,在公司班车上觉得无聊,看了下btrace的源码(自己反编译). 一些关于btrace的基本内容,可以看下我早起 ...

  5. VC printf输出彩色字体

    在VC下使用SetConsoleTextAttribute()函数可以改变当前控制台的前景色和背景色,从而达到输出彩色字体的效果. 使用的方法也很简单,具体代码如下: #include <win ...

  6. The content of element type "beans" must match "(description?,(import|alias|bean)*)

    The content of element type "beans" must match "(description?,(import|alias|bean)*) - ...

  7. MKServerBuilder.psd1

    MKServerBuilder.psd1 # # Module manifest for module 'MKServerBuilder' # # Generated by: Edward Guan ...

  8. 传送门（portal）

    Linux: #RHEL/CentOS/fedora系列为主 Basis: Commands: Services: SpamAssassin: Tomcat: Hadoop: Hive: Pig: Z ...

  9. C#实现动态网站伪静态，使seo更友好

    本教程将使用Visual Studio 2013手把手教你实现webform动态页面的伪静态.本教程配套的C#源码工程可通过我的github下载.地址:https://github.com/shell ...

  10. PHP程序漏洞产生的原因和防范方法

    滥用include 1.漏洞原因: Include是编写PHP网站中最常用的函数,并且支持相对路径.有很多PHP脚本直接把某输入变量作为Include的参数,造成任意引用脚本.绝对路径泄露等漏洞.看以 ...