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