初初认识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. Android模拟器报"Failed To Allocate memory 8"错误的解决办法

    此错误是我们在允许AVD时,选择了默认的AVD插件所致. 解决方法:减少分配的内存大小.修改AVD的config.ini配置文件,将选项“hw.ramSize=1024”从1024改为256.

  2. eclipse中建立tomcat容器

    步骤 1.  new - orther - server 出现下图,选择tomcat版本, 2. 选择已有的web项目至tomcat容器中,如果尚未建立,可不选. 3. 点击完成后,就会发现一个新建项 ...

  3. iOS中二维码的生成与使用（入门篇）

    这里简单总结一下关于二维码的扫描与生成,用的是原生的AVFoundation框架,其实这个框架目前功能还是够用的,不过这里推荐一个二维码扫描的第三方(face++),网址就不贴了,直接度娘就OK,里面 ...

  4. sso笔记

    C:\Windows\System32\drivers\etc\hosts SSO:单点登录 1.使用Cookie解决单点登录 技术点: 1.设置Cookie的路径为setPath("/&q ...

  5. js去除空格

    function trim(str){ return str.replace(/(^\s*) | ( \s*$ )/g,"" ); }

  6. Making the Elephant Dance: Strategic Enterprise Analysis

    http://www.modernanalyst.com/Resources/Articles/tabid/115/ID/2934/categoryId/23/Making-the-Elephant- ...

  7. RichtextBox打印

    附件http://files.cnblogs.com/xe2011/CSHARP_RichtextBox_PRINT.rar 打印 详情 http://support.microsoft.com/kb ...

  8. Cocos2d-x游戏中默认的AndroidManifest.xml的解析

    直接上代码说明: <?xml version="1.0" encoding="utf-8"? > <!-- xmlns:android=&qu ...

  9. python学习笔记--Django入门四 管理站点--二

    接上一节  python学习笔记--Django入门四 管理站点 设置字段可选 编辑Book模块在email字段上加上blank=True,指定email字段为可选,代码如下: class Autho ...

  10. Android 上使用 iconfont 的一种便捷方案

    最近在学习 AIOSO(Alibaba Internal Open Source Organization,即阿里巴巴内部开源组织) 的一个子项目MMCherryUI,这是一个流式布局,可以在运行时做 ...