Toggling dropdowns using jQuery, with binding and unbinding

Question

This code 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.

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);
      }
    });
  });
});

jsFiddle

Answer 1

First, regarding readability, I suggest changing the following names:

• $dropdown -> $content
• .toggle (class) -> .togglable
• .toggle (namespace) -> .toggling
• .isOpen -> isToggleOpen

On the other hand this can be achieved with reduced code (and less internal working impact), with only one event binded:

var $togglables = $('.togglable-content');
$(document).on('click.toggling', function (event) {
  var $target = $(event.target),
  $content = $target.siblings('.togglable-content');
  if (!$target.hasClass('isTogglableOpen')) {
    $togglables.not($content).removeClass('isTogglableOpen');
    $content.toggleClass('isTogglableOpen');
    return false;
  }
});

Here is the modified fiddle.

Answer 2

I ended using this code, once the dropdown is closed no more events run.

$('.header-top-bar .toggle').on('click', function (event) {
  event.preventDefault();

  var $this = $(this),
      $content = $this.next('.toggle-content');

  if (!$content.hasClass('isOpen')) {
    $content.addClass('isOpen');

    setTimeout(function () {
      $document.on('click.headerToggle', function (event) {
        if (!$(event.target).closest($content).length) {
          $content.removeClass('isOpen');
          $document.off('click.headerToggle');
        }
      });
    }, 10);
  }
});

Thank you all for your help.

Fiddle