通过jQuery在模糊时隐藏div
通过jQuery在模糊时隐藏div
提问于 2012-06-18 22:07:08
我试图使用一个div来创建一个多选下拉的错觉，这个div是通过按下一个空的下拉列表来切换的。它工作得很好，但我希望在div之外单击时能够隐藏它。我该怎么做呢？我使用以下代码：
<script src="../js/jqGlobal.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".testColor").click(function () {
$("#exampleDiv").toggle();
});
$("#exampleDiv").blur(function () {
$("#exampleDiv").toggle();
});
});
</script>
<style type="text/css">
#exampleDiv
{
position: absolute;
top:22px;
left: 0px;
width:198px;
height:150px;
overflow-y: scroll;
overflow-x: hidden;
border: 1px solid #7F9DB9;
display: none;
}
</style>
<div style="position:relative;">
<asp:DropDownList ID="DropDownList1" runat="server" Width="200" class="testColor">
</asp:DropDownList>
<div id="exampleDiv">
<asp:CheckBox ID="CheckBox2" runat="server" />
<br />
<asp:CheckBox ID="CheckBox3" runat="server" />
<br />
<asp:CheckBox ID="CheckBox4" runat="server" />
<br />
<asp:CheckBox ID="CheckBox5" runat="server" />
<br />
<asp:CheckBox ID="CheckBox6" runat="server" />
<br />
<asp:CheckBox ID="CheckBox7" runat="server" />
<br />
<asp:CheckBox ID="CheckBox8" runat="server" />
<br />
<asp:CheckBox ID="CheckBox9" runat="server" />
<br />
<asp:CheckBox ID="CheckBox10" runat="server" />
<br />
<asp:CheckBox ID="CheckBox11" runat="server" />
<br />
<asp:CheckBox ID="CheckBox12" runat="server" />
<br />
</div>
</div>回答 3
Stack Overflow用户
回答已采纳
发布于 2012-06-18 22:21:04
单击页面上的任意位置隐藏div，并在单击testColor时取消传播到父元素的单击
function cancelBubleEv(e)
{
e = e||event;
e.stopPropagation? e.stopPropagation() : e.cancelBubble = true;
}
$(document).ready(function () {
$(document).click(function () {
$("#exampleDiv").hide();
});
$(".testColor").click(function (e) {
$("#exampleDiv").toggle();
cancelBubleEv(e);
});
$("#exampleDiv").click(function (e) {
cancelBubleEv(e);
});
});编辑：
单击复选框时取消事件传播
Stack Overflow用户
发布于 2012-06-18 22:14:00
var element = $("#exampleDiv");
$(document).bind('mouseup', function (e){
if (element.has(e.target).length === 0)
$(element).hide();
});
$(element).click(function(){
$(element).show();
})Stack Overflow用户
发布于 2012-06-18 22:10:05
您可以尝试.mouseout()而不是.blur()
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11084606
复制相关文章
相似问题
腾讯云开发者
