Div slide up when click in items inside it

Question

I have a div that slides down (opens) when I click a certain input select. Inside this div, I have some other input selects and my objective is to slide up the div when I click on the rest of the page.

My problem:

The div slides up when I select some item in the input selects inside it, and I don't want this to happen.

• Is there some way to slide up the div only when I click outside it?
• Why are the selects inside the div making it to slide up as well?

This is my javascript to slide up the div:

$(document).mouseup(function (e) {
  var container = $('.myDiv');
  if (container.has(e.target).length === 0) {
    $(container).removeClass('close');
    $(container).addClass('open');
    $(container).next().slideUp(200);
  }
});

Answer 1

The div slides up when I select some item in the input selects inside it, and I don't want this to happen.

Is there some way to slide up the div only when I click outside it? Why are the selects inside the div making it to slide up as well?

Use event.stopPropagation() on the child element(s) to prevent the slide event being triggered by them.

event.stopPropagation - Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

Here's a simple jsFiddle and the basic example below.

jQuery:

$('div').click(function(){
  $('#slideMeUp').slideUp();
});

$('select').click(function(e){
  e.stopPropagation();
});

HTML:

<div>Clicking here will trigger it! 
    <select>
        <option>This won't trigger the click event anymore!</option>
    </select>
    Clicking here will also trigger it!
</div>

<div id="slideMeUp">Only clicking the outer div will slide me up!</div>

Answer 2

you can check you e.target.id with your container id

        $(document).mouseup(function (e) {
            var container = $('.myDiv');
            if(e.target.id==$(this).attr('id'))
            {
            if (container.has(e.target).length === 0) {
                $(container).removeClass('close');
                $(container).addClass('open');
                $(container).next().slideUp(200);
            }
            }
        });

Answer 3

If it's specific items that are causing problems, perhaps something like this?

On click tell it to to slideUp your div as long as the clicked item is "not" in the list.

('body').click(function(event) {
  if (!$(event.target).is('#id_of_item .class_to_ignore')) {
    var container = $('.myDiv');
    $(container).removeClass('close');
    $(container).addClass('open');
    $(container).next().slideUp(200);
  }
});

Answer 4

I'd suggest binding mousedown rather than mouseup. There are inconsistencies in behaviour between browsers, this may have something to do with your issue.

You should also add some logic to check the clicked element isn't the div itself, clicking just outside of an input, but still inside of the div would currently cause the slideUp to occur.

if (!container.has(e.target).length && !container.is(e.target)) {
  ...
}

Other than that, it should work fine.

Have a fiddle