title: What is the proper way to detect Bootstrap dropdown menu selections?
body: <p>Using Twitter Bootstrap and the <a href="http://getbootstrap.com/javascript/#dropdowns" rel="nofollow">Javascript Dropdowns feature</a>, what is the proper way to hide the menu on the <code>.dropdown-menu li a</code> click event, as well as update some property on what was selected, without that <code>&lt;a&gt;</code> click event firing and going off to its <code>href</code> value?</p>
  
  <p>Here's the way I'm doing it now for lack of better documentation on this. However, is there a recommended way that the Twitter Bootstrap authors would rather that I do this? I mean, it would be great if all I would have to do is add some property on the menu item and then it automatically hides the dropdown and updates a property on the dropdown-toggle control.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $('#listoptions A').click(function(e){
    e.preventDefault();
    $('#listoptions').removeClass('open');
    var sWhich = $(this).attr('id');
    if (sWhich == 'addnewlist') {
      addNewList();
    } else if (sWhich == 'renamelist') {
      renameList();
    } else if (sWhich == 'exportlist') {
      exportList();
    } else if (sWhich == 'importlist') {
      importList();
    } else if (sWhich == 'emptylist') {
      emptyList();
    } else if (sWhich == 'deletelist') {
      deleteList();
    }
    return false;
  });
  &lt;/script&gt;
  
  &lt;div id="listoptions" class="btn-group"&gt;
    &lt;button type="button" class="btn btn-default dropdown-toggle" data-target="#" data-toggle="dropdown" 
    aria-expanded="false"&gt;&lt;span class="glyphicon glyphicon-cog"&gt;&lt;/span&gt; &lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
    &lt;ul class="dropdown-menu align-left" role="menu"&gt;
    &lt;li&gt;&lt;a href="#" id="addnewlist" role="menuitem"&gt;Add New List...&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" id="renamelist" role="menuitem"&gt;Rename List...&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" id="exportlist" role="menuitem"&gt;Export List...&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" id="importlist" role="menuitem"&gt;Import Into List...&lt;/a&gt;&lt;/li&gt;
    &lt;li class="divider"&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" id="emptylist" role="menuitem"&gt;Empty List&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" id="deletelist" role="menuitem"&gt;Delete List&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>