CODEWITHSUNDEEP
javascriptjquery
Maarten
Maarten

Reputation: 229

Closing css dropdown using jquery

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?

Upvotes: 1

Views: 63

Answers (2)

Adam P.
Adam P.

Reputation: 108

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.

Upvotes: 0

Gareth
Gareth

Reputation: 380

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

Upvotes: 2

Related Questions