Closing css dropdown using jquery

Question

Sorry for the vague project title but I'm not having a great idea about how to explain this.

So, let's dive in to it. I was in need of a dropdown list with multiple select options to select recipients from.

I've started my search on Codepen and came across this: https://codepen.io/MaartenTe/pen/mXYLXj

I've forked it so I could tweak it myself. The snippets works perfect. The only thing missing is the ability of closing the dropdownlist when clicking outside of it.

So I started to approach it using javascript. So far I got following code:

$(document).click(function(e) {
  var target = e.target; //target div recorded
  if (!$(target).is('.multi-select ') ) {
    $('.multi-select-options span').css('display', 'none');
    $('.multi-select-options label').css('display', 'none');
  }
});

Although this isn't working the way I want, I think it's the right approach?

Gareth · Accepted Answer · 2018-03-23 09:10:11Z

2

Looking at how that works, its a checkbox that causes the toggle so you need to clear that when you click out the box.

$('.multi-select').on('click', function(e){
  e.stopPropagation()
});

$(window).on('click', function(e) {
 $('#toggle-open').attr({checked: false})
});

The stopPropagation will stop the window click even firing. https://codepen.io/anon/pen/rdwrya?editors=1111

answered Mar 23, 2018 at 9:10

Gareth

3803 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adam P. · Accepted Answer · 2018-03-23 09:33:34Z

0

What works in the given codepen:

var toggle = document.getElementById('toggle-open');
document.addEventListener('click', function(event) {
  if (['INPUT', 'LABEL', 'SPAN'].indexOf(event.target.nodeName) + 1) return;
  if (toggle.checked)    toggle.checked = false;
});

Just handle click, exclude the relevant elements and uncheck if needed.

answered Mar 23, 2018 at 9:33

Adam P.

1076 bronze badges

Collectives™ on Stack Overflow

Closing css dropdown using jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related