我们假设我有以下控件：
<div class="slControlWrapper">
<div class="slControlLabel">
<asp:Label ID="lblSL" CssClass="lblSL" runat="server">Clickable Label</asp:Label>
</div>
<div class="slControlSeparator">
<img alt="" src="../Images/pxlGray.gif" style="width: 1px; height: 29px" />
</div>
<div class="slControlDropDown">
<img alt="Clickable DropDown image" src="../Images/btDropDownCharcoal.gif" style="width: 23px; height: 29px" />
</div>
<div id="wndSL">
This is the hidden content of my DIV Window
</div>
</div>
默认情况下，wndSL有 style =“display：none; background-color：blue; height：500px; width：590px;”
当我点击slControlLabel或slControlDropDown时，我能够显示wndSL。 但是当我点击slControlLabel或slControlDropDown或外面的wndSL之外的任何地方时，我也需要隐藏它。
任何人都可以帮我解决如何隐藏它，点击我的wndSL以外的任何地方。
这就是我到目前为止......我需要添加这个片段，以便在我点击窗外时隐藏它
由于
$('.slControlLabel, .slControlDropDown').bind('click',function(event){
alert('This will open the wndSL');
$('#wndSL').show();
});
新问题修订版2
这是我现在拥有的DIV，因为你会看到我有更多控件...所以原始答案不再起作用了，因为当我点击DIV中的控件时，它仍然会关闭DIV。 ...所以虽然当你在DIV外面点击时我的原始请求是关闭的，当我在DIV中添加控件时，我隐藏的条件不起作用...我如何调整它以便点击DIV中的任何内容不会关闭窗口（标题上的关闭按钮icoRedX.gif除外）
这是我的控制
<div class="wndShoppingList" id="wndShoppingList" style="display: block; ">
<div id="ctl00_ctl00_phContent_DynamicUserControl_Step_1_pnlWndShoppingListContentPanel" style="display: block; "><div id="ctl00_phContent_DynamicUserControl_Step_1_pnlWndShoppingListContent">
<div class="tableContainer">
<div class="header">
<div class="slHeaderLeft">
Select a Saved Shopping List
</div>
<div class="slHeaderRight">
<a id="ctl00_phContent_DynamicUserControl_Step_1_btClose" class="RadButton RadButton_Default rbImageButton" href="javascript:void(0)" style="display:inline-block;height:20px;width:18px;background-image:url(/APPSERVER0001/Images/icoDeleteGrayX.gif);line-height:20px;line-height:20px;height:20px;"><span class="rbText rbHideElement" style="width:100%;padding-left:0;padding-right:0;"></span><input id="ctl00_phContent_DynamicUserControl_Step_1_btClose_ClientState" name="ctl00_phContent_DynamicUserControl_Step_1_btClose_ClientState" type="hidden" autocomplete="off"></a>
</div>
</div>
<div class="details">
<div class="gridDescription">
Select a saved Shopping List to open. The list you already have open will be automatically saved
</div>
<div class="gridContainer">
<div id="ctl00_ctl00_phContent_DynamicUserControl_Step_1_pnlTemplateShoppingListPanel">
<div id="ctl00_phContent_DynamicUserControl_Step_1_pnlTemplateShoppingList">
<div id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList" class="RadGrid RadGrid_Default" style="height:300px;" tabindex="0">
<table cellspacing="0" class="rgMasterTable" id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00" style="width:100%;table-layout:auto;empty-cells:show;">
<colgroup>
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr style="display:none;">
<th scope="col"> </th><th scope="col"> </th><th scope="col"> </th><th scope="col"> </th>
</tr>
</thead><tbody>
<tr class="rgRow" id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00__0">
<td><input type="image" name="ctl00$phContent$DynamicUserControl_Step_1$grdTemplateShoppingList$ctl00$ctl04$gbcSelectColumn" id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl04_gbcSelectColumn" src="../Images/btSelectCharcoal.gif" style="border-width:0px;"></td><td>
<span id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl04_lblTemplateName">Master Shopping List</span><br>
<span id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl04_lblLastUpdated"> Updated August 10, 2011</span>
</td><td>16 items</td><td><input type="image" name="ctl00$phContent$DynamicUserControl_Step_1$grdTemplateShoppingList$ctl00$ctl04$gbcDeleteColumn" id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl04_gbcDeleteColumn" src="../Images/icoDeleteRedX.gif" onclick="if(!confirm('Are you sure you want to delete this list ?'))return false;" style="border-width:0px;"></td>
</tr><tr class="rgAltRow" id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00__1">
<td><input type="image" name="ctl00$phContent$DynamicUserControl_Step_1$grdTemplateShoppingList$ctl00$ctl06$gbcSelectColumn" id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl06_gbcSelectColumn" src="../Images/btSelectCharcoal.gif" style="border-width:0px;"></td><td>
<span id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl06_lblTemplateName">Audrey's Birthday Party</span><br>
<span id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl06_lblLastUpdated">Shopped August 2, 2011 for $49.11</span>
</td><td>11 items</td><td><input type="image" name="ctl00$phContent$DynamicUserControl_Step_1$grdTemplateShoppingList$ctl00$ctl06$gbcDeleteColumn" id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl06_gbcDeleteColumn" src="../Images/icoDeleteRedX.gif" onclick="if(!confirm('Are you sure you want to delete this list ?'))return false;" style="border-width:0px;"></td>
</tr><tr class="rgRow" id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00__2">
<td><input type="image" name="ctl00$phContent$DynamicUserControl_Step_1$grdTemplateShoppingList$ctl00$ctl08$gbcSelectColumn" id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl08_gbcSelectColumn" src="../Images/btSelectCharcoal.gif" style="border-width:0px;"></td><td>
<span id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl08_lblTemplateName">Monthly Household Supplies</span><br>
<span id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl08_lblLastUpdated">Updated February 22, 2011</span>
</td><td>8 items</td><td><input type="image" name="ctl00$phContent$DynamicUserControl_Step_1$grdTemplateShoppingList$ctl00$ctl08$gbcDeleteColumn" id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl08_gbcDeleteColumn" src="../Images/icoDeleteRedX.gif" onclick="if(!confirm('Are you sure you want to delete this list ?'))return false;" style="border-width:0px;"></td>
</tr>
</tbody>
</table>
<input id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ClientState" name="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ClientState" type="hidden" autocomplete="off">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
这是JS
function OnPageLoad(){
window.$ = $telerik.$;
var t;
$(document).ready(function () {
$('.slControlLabel, .slControlDropDown').bind('click',function(event){
$('#wndShoppingList').show();
event.stopPropagation();
});
// OnClick Event outside the wndShoppinglist.
// $('html').click(function(event){ Tried this as well
if((event.target.id != 'wndShoppingList')){ // This used to work but after adding controls in the DIV, this returns the ID of the controls within the DIV
alert('click on body '+ event.target.id)
alert('about to hide')
$('#wndShoppingList').hide();
});
}); //End $(document).ready()
}
Sys.Application.add_load(OnPageLoad);
答案 0 :(得分：2)
将点击事件绑定到html以捕获所做的任何点击，并将其隐藏#wndSL
$("html").click(function() {
$("#wndSL").hide();
});
然后使用#wndSL
.stopPropagation();的点击事件
$("#wndSL").click(function (event) {
event.stopPropagation();
});
答案 1 :(得分：1)
您需要使用
event.stopPropagation();
HTML
<div class="slControlWrapper">
<div class="slControlLabel">
<asp:Label ID="lblSL" CssClass="lblSL" runat="server">Clickable Label</asp:Label>
</div>
<div class="slControlSeparator">
<img alt="" src="../Images/pxlGray.gif" style="width: 1px; height: 29px" />
</div>
<div class="slControlDropDown">
<img alt="Clickable DropDown image" src="../Images/btDropDownCharcoal.gif" style="width: 23px; height: 29px" />
</div>
<div id="wndSL">
This is the hidden content of my DIV Window
</div>
<div id="test">
I am for test click on me
</div>
</div>
CSS
#wndSL {
display:none; background-color: blue; height:500px; width:590px;
}
Jquery的
$('.slControlLabel, .slControlDropDown').bind('click',function(event){
alert('This will open the wndSL');
$('#wndSL').show();
event.stopPropagation();
});
$('html').click(function() {
$('#wndSL').hide();
});
这是Demo
答案 2 :(得分：0)
$("body").click
(
function(e)
{
if(e.target.id != "wndSL")
{
$("#wndSL").hide();
}
}
);