title: Modularize/Objectify JQuery
body: <p>I have a number of different "control elements" on my application: dropdowns, tabs, menus, etc.  On same pages, there are many of the same control.  When writing JavaScript to handle the different events associated with each of these controls, I'm trying to make my code as DRY as possible.  One of the challenges is <em>modularizing</em> my JQuery code so that events that occur within a specific control only effect that control.</p>
  
  <p>Take this initial code for example, all it does is open a dropdown menu when it is clicked.  I'm used to writing just a ton of different anonymous functions triggered by different events so this type of JQuery is really new to me.</p>
  
  <pre><code>var dropdown = {
    init: function() {
      $(".dropdown").click(".dropdown", dropdown.openDropdown);
    },  
    openDropdown: function() {
      $(this).children(".dropdown-menu").show();
      $(this).addClass("open");
    }
  }
  
  $(document).ready(dropdown.init);
  </code></pre>
  
  <p>My question is, within this <code>dropdown</code> variable, I want to be able to save/track different pieces of the <code>dropdown</code> control currently being acted upon.  For example, I might want to write:</p>
  
  <pre><code>var menu = $(this).children(".dropdown-menu");
  </code></pre>
  
  <p>somewhere in this chunk so that I could refer back to this menu while calling different functions.  I just cannot figure out syntactically how to do this.  Any help/guidance is welcomed!  Thanks.</p>