初初认识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. 手机APP上下滚动翻页效果

    //页面初期加载时        $(document).ready(function () { //加载第一页            LoadList(); //滚动换页            $( ...

  2. Apache Commons 工具类介绍及简单使用

    转自:http://www.cnblogs.com/younggun/p/3247261.html Apache Commons包含了很多开源的工具,用于解决平时编程经常会遇到的问题,减少重复劳动.下 ...

  3. use SWF / Flash in cocos2d-x; cocos2d(cocos2d-x) 直接播放flash / SWF文件

    前段时间移植一个页游到手游,原先页游的项目里面有1000+的Flash人物,宠物动画,特效. 这要是全部重新做一遍,还不累死人?所以就想干脆直接在Cocos2d(x)里面播放SWF文件.(包括场景,过 ...

  4. 编译C++，找不到头文件（fatal error: string: No such file or directory）

    在androidproject中编译C++时,找不到头文件,报错例如以下: fatal error: string: No such file or directory 解决该问题须要在Android ...

  5. TREEVIEW拖拽对应修改目录

    附件:http://files.cnblogs.com/xe2011/TreeView_Drag_Directory%E6%93%8D%E4%BD%9C.rar     TREEVIEW拖拽对应修改目 ...

  6. OGG-01224 Bad file number

    今天在看OGG的日志时.发现例如以下OGG-01224 Bad file number错误.查阅资料才知道port不可用,看了一下mgr的參数,发现是设置的DYNAMICPORTLIST 动态port ...

  7. uva-10487 - Closest Sums

    暴力枚举后去重最后二分加推断找答案 #include<iostream> #include<map> #include<string> #include<cs ...

  8. mongodb 学习笔记 09 -- shard分片

    概述 shard 分片 就是 把不同的数据分在不同的server 模型 当中:     用户对mongodb的操作都是向mongs请求的     configsvr 用于保存,某条数据保存在哪个sha ...

  9. JDBC-简单的学生管理系统-增删改查

    结构:三层架构--mvc 三层是为了解决整个应用程序中各个业务操作过程中不同阶段的代码封装的问题,为了使程序员更加专注的处理某阶段的业务逻辑. 比如将数据库操作代码封装到一层中,提供一些方法根据参数直 ...

  10. SCIP读书笔记(1)

    这书也算是必修吧,尤其是我这种非科班人员,还是应该抽时间尽量学习一下.大致翻过一遍,习题非常多,尽力吧. ##构造过程抽象 * 为了表述认知,每种语言都提供了三种机制:基本元素:组合方式:抽象方法. ...