jQuery Events

Hey guys,

Need some help from the js pro’s.

The code below is used to toggle some dropdowns, I’ve added the click event on the document to close the dropdown on click outside, but I’m not sure if I’m doing it the right way, I want it to be optimized for better performance.

Here’s the code, let me know if you have a better way to bind/unbind the events.

$('.header-top-bar .toggle').each(function (index) {
  var $this = $(this),
      $parent = $this.parent(),
      $dropdown = $this.siblings('.toggle-content');

  $this.on('click.toggle' + index, function (event) {
    event.preventDefault();

    $dropdown.toggleClass('isOpen');

    // Outside
    $document.on('click.toggle' + index, function (event) {
      if (!$(event.target).closest($parent).length) {
        $dropdown.removeClass('isOpen');
        $document.off('click.toggle' + index);
      }
    });
  });
});