当在页面的任何地方点击时jQuery隐藏元素
我想知道这是否是在页面上的任何位置单击时隐藏可见元素的正确方法。
$(document).click(function (event) { $('#myDIV:visible').hide(); }); 点击事件发生在元素的边界内时，元素（div，span等）不应该消失。
如果我明白你想要隐藏一个div当你点击任何地方，但div，如果你点击，而不是closures的div，那么它不应该closures。 你可以这样做：
$(document).click(function() { alert("me"); }); $(".myDiv").click(function(e) { e.stopPropagation(); // This is the preferred method. return false; // This should not be used unless you do not want // any click events registering inside the div });
这将点击绑定到整个页面，但是如果你点击有问题的div，它将取消点击事件。
尝试这个
$('.myDiv').click(function(e) { //button click class name is myDiv e.stopPropagation(); }) $(function(){ $(document).click(function(){ $('.myDiv').hide(); //hide the button }); });
我使用类名而不是ID ，因为在asp.net中，你不得不担心额外的东西.net附加到ID
编辑 –既然你添加了另一块，它会这样工作：
$('.myDiv').click(function() { //button click class name is myDiv e.stopPropagation(); }) $(function(){ $('.openDiv').click(function() { $('.myDiv').show(); }); $(document).click(function(){ $('.myDiv').hide(); //hide the button }); });
从jQuery 1.7开始，有一种处理事件的新方法。 我以为我会在这里回答，只是为了说明我如何去做这个“新”的方式。 如果你还没有，我build议你阅读jQuery文档的“on”方法 。
var handler = function(event){ // if the target is a descendent of container do nothing if($(event.target).is(".container, .container *")) return; // remove event handler from document $(document).off("click", handler); // dostuff } $(document).on("click", handler);
在这里，我们滥用jQuery的select器和冒泡事件。 请注意，我确保在事后处理事件处理程序。 您可以使用$('.container').one （ 请参阅：docs ）自动执行此操作，但是因为我们需要在处理程序中执行不适用的条件。
下面的代码示例似乎对我来说最合适。 虽然你可以使用'return false'来停止对div或其子任何事件的所有处理。 如果你想在popup的div上有一个控件（例如popup的login表单），你需要使用event.stopPropogation（）。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <a id="link" href="#">show box</a> <div id="box" style="background: #eee; display: none"> <p>a paragraph of text</p> <input type="file" /> </div> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> var box = $('#box'); var link = $('#link'); link.click(function() { box.show(); return false; }); $(document).click(function() { box.hide(); }); box.click(function(e) { e.stopPropagation(); }); </script> </body> </html>
谢谢，托马斯。 我是新来的JS，我一直在寻找解决我的问题的疯狂。 你的帮助。
我已经使用jQuery来制作一个滑动的login框。 为了获得最佳的用户体验，我希望当用户点击某个地方而不是盒子时，该框就会消失。 使用大约四个小时来解决这个问题，我有些尴尬。 但是，嘿，我是JS新手。
也许我的代码可以帮助别人：
<body> <button class="login">Logg inn</button> <script type="text/javascript"> $("button.login").click(function () { if ($("div#box:first").is(":hidden")) { $("div#box").slideDown("slow");} else { $("div#box").slideUp("slow"); } }); </script> <div id="box">Lots of login content</div> <script type="text/javascript"> var box = $('#box'); var login = $('.login'); login.click(function() { box.show(); return false; }); $(document).click(function() { box.hide(); }); box.click(function(e) { e.stopPropagation(); }); </script> </body>
你也可以做的是：
$(document).click(function (e) { var container = $("div"); if (!container.is(e.target) && container.has(e.target).length === 0) { container.fadeOut('slow'); } });
如果你的目标不是一个div，那么通过检查它的长度等于零来隐藏div。
我做了以下。 分享的想法，所以别人也可以受益。
$("div#newButtonDiv").click(function(){ $(this).find("ul.sub-menu").css({"display":"block"}); $(this).click(function(event){ event.stopPropagation(); $("html").click(function(){ $(this).find("ul.sub-menu").css({"display":"none"}); } }); });
让我知道，如果我能帮助这个人。
在非子元素中发生点击时隐藏容器div的另一种方法;
$(document).on('click', function(e) { if(!$.contains($('.yourContainer').get(0), e.target)) { $('.yourContainer').hide(); } });
$(document).on('click', function(e) { // Hides the div by clicking any where in the screen if ( $(e.target).closest('#suggest_input').length ) { $(".suggest_div").show(); }else if ( ! $(e.target).closest('.suggest_container').length ) { $('.suggest_div').hide(); } });
这里#suggest_input in是文本框的名称，.suggest_container是ul类名，.suggest_div是我自动build议的主要div元素。
这个代码是通过点击屏幕上的任何位置隐藏div元素。 在做任何事情之前，请先了解代码并复制它…
试试这个，它对我来说是完美的。
$(document).mouseup(function (e) { var searchcontainer = $("#search_container"); if (!searchcontainer.is(e.target) // if the target of the click isn't the container... && searchcontainer.has(e.target).length === 0) // ... nor a descendant of the container { searchcontainer.hide(); } });
$('html').click(function() { //Hide the menus if it is visible }); $('#menu_container').click(function(event){ event.stopPropagation(); });
但你也需要记住这些事情。 http://css-tricks.com/dangers-stopping-event-propagation/
这是一个基于Sandeep Pal的答案的工作CSS /小JS解决scheme：
$(document).click(function (e) { if (!$("#noticeMenu").is(e.target) && $("#noticeMenu").has(e.target).length == 0) { $("#menu-toggle3").prop('checked', false); } });
点击checkbox，然后在菜单的外面试试看：
这不起作用 – 当你点击里面的时候它隐藏了.myDIV。
$('.openDiv').click(function(e) { $('.myDiv').show(); e.stopPropagation(); }) $(document).click(function(){ $('.myDiv').hide(); }); }); <a class="openDiv">DISPLAY DIV</a> <div class="myDiv">HIDE DIV</div>
只是对上述build议进行了两项小改进：
- 取消绑定文件。完成后点击
-
在触发该事件的事件上停止传播，假设它是一个点击
jQuery(thelink).click(function(e){ jQuery(thepop).show(); // bind the hide controls var jpop=jQuery(thepop); jQuery(document).bind("click.hidethepop", function() { jpop.hide(); // unbind the hide controls jQuery(document).unbind("click.hidethepop"); }); // dont close thepop when you click on thepop jQuery(thepop).click(function(e) { e.stopPropagation(); }); // and dont close thepop now e.stopPropagation(); });
尝试这个：
$(document).mouseup(function (e) { var div = $("your div"); if (!div.is(e.target) && div.has(e.target).length === 0) { div.hide(); } });
$(document).mouseup(function (e) { var mydiv = $('div#mydiv'); if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){ search.slideUp(); } });
$(document).ready(function(){ $("button").click(function(){ $(".div3").toggle(1000); }); $("body").click(function(event) { if($(event.target).attr('class') != '1' && $(event.target).attr('class') != 'div3'){ $(".div3").hide(1000);} }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <button class="1">Click to fade in boxes</button><br><br> <body style="width:100%;height:200px;background-color:pink;"> <div class="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div><body>
