在外部单击时隐藏div

Question

I have a hidden div which opens up on click of a link text. I need to hide the div and remove the active class from the link text when user clicks outside the div anywhere on the body.

I have used body onclick to hide the div but it is hiding the div on div click as well. I don't want to close the div only on body click, not on the div click. How can I stop the action on div click?

here is what I have tried

$('.link').click(function(e){
e.stopPropagation();
    $(this).toggleClass('active');
    $(".box").slideToggle();
});

$('body').click(function(e) {
    $(".box").hide();
        $(".link").removeClass('active');
});

DEMO

Answer 1

Try to use event.target jQuery.

event.target

 $('body').click(function(event) { if (!$('.box').is(event.target) && $('.box').has(event.target).length === 0) { $('.box').slideUp(); $('.link').removeClass('active'); } }); $('.link').click(function(event) { event.stopPropagation() $(this).toggleClass('active'); $(".box").slideToggle(); }); 

 .header { background: #fff; padding: 20px } body { height: 600px; font: 13px Verdana; } .link_div { position: relative } .link { display: inline-block; outline: none; padding: 10px; color: black; background: #e1e1e1; box-shadow: -1px -3px 3px 0px rgba(109, 109, 109, 0.2); } .box { display: none; background: #8bdeff; padding: 30px; position: absolute; top: 40px; left: 0 } .active { background: #8bdeff } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="header"> <div class="link_div"> <a href="#" class="link">Open box</a> <div class="box"> I am a box </div> </div> </div> 

Answer 2

Here's what I recommend you do:

$('.link').click(function(e){
    e.stopPropagation();
    $(this).toggleClass('active');
    $(".box").slideToggle();
});

$('body').click(function(e) {
    var target = e.target;

    // Short-circuit if box is clicked OR
    // link is not active
    if ($(target).is('.box')) return;
    if (!$(".link").hasClass('active')) return

    $(".box").slideToggle();
    $(".link").removeClass('active');
});

Some things to note:

1. e is the event passed to your eventListener when clicked, it has a target that you can check for.
2. I'm short-circuiting when the box is the target clicked or if the link is already active
3. I'm using the slideToggle instead of the hide because it's nicer, and since this will only trigger when the link is active, you don't have to worry about clicking outside the div and having the link toggle/open when it's closed.

Hope that helps!

JSFiddle: https://jsfiddle.net/Lm85m7nb/

Answer 3

You can just check if the clicked element is the class .box and do nothing if it is.

 $('.link, .box').click(function(e) { // Added .box to the click-function if ($(this).attr("class") == "box") { // check if the clicked element is .box return false; // do nothing like return false } e.stopPropagation(); $(this).toggleClass('active'); $(".box").slideToggle(); }); $('body').click(function(e) { $(".box").hide(); $(".link").removeClass('active'); }); 

 .header { background: #fff; padding: 20px } .link_div { position: relative } .link { display: inline-block; outline: none; padding: 10px; color: black; background: #e1e1e1; box-shadow: -1px -3px 3px 0px rgba(109, 109, 109, 0.2); } .box { display: none; background: #8bdeff; padding: 30px; position: absolute; top: 40px; left: 0 } .active { background: #8bdeff } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="header"> <div class="link_div"> <a href="#" class="link">Open box</a> <div class="box"> I am a box </div> </div> </div> 

Answer 4

Hi You can use this code for add document click event for click to close in outside

$('.link').click(function(e){
  e.stopPropagation();
  e.preventDefault();
    $(this).toggleClass('active');
    $(".box").slideToggle();
});

$(document).click(function(e) {
    $(".box").hide();
        $(".link").removeClass('active');
})