Jquery not选择器实现元素显示隐藏

初初认识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()。

时间： 2024-10-08 15:15:28

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

元素显示隐藏的9种思路

× 目录 [1]display [2]visibility [3]hidden[4]opacity[5]overflow[6]clip[7]transform[8]覆盖[9]偏移前面的话在网页制作中,元素的显示隐藏是非常常见的需求.本文将介绍元素显示隐藏的9种思路思路一: display 对于元素显隐来说,最常见就是display:none | display:block,但是使用这种方法有个问题,元素的display属性在隐藏前并不都是block,还有可能是inline.inline-b

jq 筛选选择器，方法，隐式迭代元素显示隐藏淡入淡出上拉下拉动画类名操作以及样式

jQuery 地址:https://jquery.com/ 历史版本:http://code.jquery.com/ 1.x:兼容 IE678 低版本浏览器 2.x:不兼容 IE678 低版本浏览器 3.x:不兼容 IE678 低版本浏览器,官方主要维护版本入口函数 // 一下两种入口函数相当于原生中的 DOMContentLoaded $(function () { /* DOM加载完成的入口*/ }) $(document).ready(function(){ /* DOM加载完成的入口

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

应用场景在项目中会存在大量这样的需求: 1.选择不同的radio单选框,页面上的部分内容随之显示隐藏 2.选择不同的option下拉框内容,页面上的部分内容随之显示隐藏如果每次遇到这类需求都单独写方法,不光费时间,还会让我们的代码显得异常冗余,因此我们写个通用方法! 附上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <tit

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

<html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> #div1 { width: 100px; height:100px; background: red; display: none; } </style> <script> function showhide

jquery的toggle动画效果显示隐藏

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ border: 1px solid white; width: 500px; height: 350px; margin: auto; text-align: center; } </

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>可见性选择器</title>

JQuery 控制元素显示隐藏

JS在浏览器里面做调试的时候,先在浏览器里面找到页面代码加上断点来执行.然后根据执行情况来查找部分变量是否能找到,一点一点的排查内容.可以做筛选条件部分隐藏.默认让部分条件加上.hide 默认隐藏,然后通过点击更多类目来切换隐藏与显示 <style>.hide{display:none;}<style> <div class="seach-guide"> <div class="item clearfix">3

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

// CSS var display = $("."+cls).css("display"); if(display == "none"){ 隐藏 }else{ 显示 } // JQuery if($("."+cls).is(":hidden")){ 隐藏 }else{ 显示 }

前端之 jQuery: 简介, 选择器, 动画效果, 属性操作; (一)

jQuery 简介 jQuery 选择器 jQuery 动画效果 jQuery 属性操作 jQuery 简介为什么要使用jQuery: 答: 因为优秀. 什么是 jQuery: jQuery 是 js 的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,提高开发效率. js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里即可. 关于jQuery的相关资料: 官网:http://jquery.com/ 官网API文档:http://api.jquery.com/