根据去哪儿（http://www.qunar.com/）输入框点击按钮而写
实现功能效果：
1、点击按钮，相应层显示，点击层以外的部分层隐藏;
2、重复点击按钮时，按钮附属层显示时变隐藏，反之亦然;
3、如果一个页面上有两个以上这种效果，层会有互斥效果;
[c-sharp] view plaincopyprint? <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %> <!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 runat="server"> <title>Porschev----鼠标点击层以外的地方层隐藏</title> <mce:script src="jquery-1.3.2-vsdoc.js" mce_src="jquery-1.3.2-vsdoc.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- $(function() { $("div[name='divClick']").click(function() { var showDiv = $(this).next(); //得到层对象 var divName = showDiv.attr('name'); //得到这个层的name if (showDiv.is(":hidden")) { //判断层是否隐藏 $("div[name='" + divName + "']").hide(); showDiv.show(); //true：显示 $('body').one('click', function() { //给BODY绑定一次性点击事件 showDiv.hide(); //点击BODY显示层 }); return false; //返回 } else { showDiv.hide(); //false:显示层 $('body').one('click', function() { //给BODY绑定一次性点击事件 showDiv.hide(); //点击BODY显示层 }); return false; //返回 } }); $("div[name='cont']").click(function() { //点击显示部分不隐藏 return false; }); }); // --></mce:script> </head> <body> <form id="form1" runat="server"> <div style="995px;height:900px"> <div name="divClick" style="color:#000000;font-weight:bold;cursor:pointer;" mce_style="color:#000000;font-weight:bold;cursor:pointer;" >打开</div> <div name="cont" style="200px;height:100px;background:#0000CC;color:#FFFFFF;display:none;">中国</div> <div name="divClick" style="color:#000000;font-weight:bold;cursor:pointer;" mce_style="color:#000000;font-weight:bold;cursor:pointer;" >打开</div> <div name="cont" style="200px;height:100px;background:#0000CC;color:#FFFFFF;display:none;">中国</div> </div> </form> </body> </html>