初初认识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. Navicat远程连接MySQL数据库

    1.打开Navicat,在界面的“主机名和IP地址”处输入IP地址,一般是192.168.1.1 2.输入相应的用户名和密码,点击连接测试,确认是否已经连接,之后就可以点击确定了 3.找到相应的数据库 ...

  2. spring security3.2配置---权限管理

    之前已经在我的博客中发过security的执行流程图了,大家能够先去看看那个图再看这篇.今天我主要在这里贴出了security配置中的几个重要的类和两个xml配置文件,基本上控制权限的就是这几个文件了 ...

  3. PHP文件头部(header)解释

    1. Accept:告诉WEB服务器自己接受什么介质类型,*/* 表示任何类型,type/* 表示该类型下的所有子类型,type/sub-type. 2. Accept-Charset:   浏览器申 ...

  4. MetaData Lock 杨奇龙 ---MYSQL博客专家

    http://blog.itpub.net/22664653/viewspace-1791608/ http://blog.csdn.net/dba_waterbin/article/details/ ...

  5. DS_Store

    .DS_Store (英文全称 Desktop Services Store)[1] 是一种由苹果公司的Mac OS X操作系统所创造的隐藏文件,目的在于存贮文件夹的自定义属性,例如文件们的图标位置或 ...

  6. react native web

    http://rawgit.com/taobaofed/react-web/master/pages/uiexplorer.html#/scene_1?_k=7vm99j

  7. javascript常用方法(慢慢整理)

    获取类型:[object object],[object function],[object Undefined]等 Object.prototype.toString.apply(obj); 获取对 ...

  8. CSS hack常用方案（摘选）

    邮箱因为默认了line-height?:170%,导致采用table元素时继承问题,可以采用line-height:50% 很好解决. 常 在使用float时,后面的显示不正常,因为继承了float了 ...

  9. flexbox 兼容安卓4.3

                 border:1px solid red;              overflow: hidden;                           font-siz ...

  10. majikan