jQuery hide element when clicked anywhere on the p

2019-01-03 05:08发布

站内问答 / jQuery
1591 17 5

I would like to know whether this is the correct way of hiding visible elements when clicked anywhere on the page. 

$(document).click(function (event) {            
    $('#myDIV:visible').hide();
});

The element (div, span etc) shouldn't disappear when click event occurs within the boundaries of the element.

17条回答
Anthone
2楼-- · 2019-01-03 05:29

Thanks, Thomas. I'm new to JS and I've been looking crazy for a solution to my problem. Yours helped.

I've used jquery to make a Login-box that slides down. For best user experience I desided to make the box disappear when user clicks somewhere but the box. I'm a little bit embarrassed over using about four hours fixing this. But hey, I'm new to JS.

Maybe my code can help someone out:

<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>
查看更多
0人赞 添加讨论(0) 举报
够拽才男人
3楼-- · 2019-01-03 05:37

Try this:

$(document).mouseup(function (e) {
var div = $("your div");
if (!div.is(e.target) && div.has(e.target).length === 0) 
{
   div.hide();
 }
});
查看更多
0人赞 添加讨论(0) 举报
时光不老，我们不散
4楼-- · 2019-01-03 05:38

Try this, it's working perfect for me.

$(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();
    }
});
查看更多
0人赞 添加讨论(0) 举报
你好瞎i
5楼-- · 2019-01-03 05:39

Just 2 small improvements to the above suggestions:

  • unbind the document.click when done

  • stop propagation on the event that triggered this, assuming its a click

    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();
});
查看更多
0人赞 添加讨论(0) 举报
何必那么认真
6楼-- · 2019-01-03 05:44

What you can also do is:

$(document).click(function (e)
{

  var container = $("div");

   if (!container.is(e.target) && container.has(e.target).length === 0)
  {
 container.fadeOut('slow');

   }

});

If your target is not a div then hide the div by checking its length is equal to zero.

查看更多
0人赞 添加讨论(0) 举报
上一页 1 2 3
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)