CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapdrop-down-menutoggle
Volomike
Volomike

Reputation: 24886

What is the proper way to detect Bootstrap dropdown menu selections?

Using Twitter Bootstrap and the Javascript Dropdowns feature, what is the proper way to hide the menu on the .dropdown-menu li a click event, as well as update some property on what was selected, without that <a> click event firing and going off to its href value?

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.

<script type="text/javascript">
$('#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;
});
</script>

<div id="listoptions" class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-target="#" data-toggle="dropdown" 
  aria-expanded="false"><span class="glyphicon glyphicon-cog"></span> <span class="caret"></span></button>
  <ul class="dropdown-menu align-left" role="menu">
  <li><a href="#" id="addnewlist" role="menuitem">Add New List...</a></li>
  <li><a href="#" id="renamelist" role="menuitem">Rename List...</a></li>
  <li><a href="#" id="exportlist" role="menuitem">Export List...</a></li>
  <li><a href="#" id="importlist" role="menuitem">Import Into List...</a></li>
  <li class="divider"></li>
  <li><a href="#" id="emptylist" role="menuitem">Empty List</a></li>
  <li><a href="#" id="deletelist" role="menuitem">Delete List</a></li>
  </ul>
</div>

Upvotes: 0

Views: 3902

Answers (2)

ABIRAMAN
ABIRAMAN

Reputation: 969

$('#listoptions a') will be treated as next absolute children of #listoption so you have to find a in #listoption

<script type="text/javascript">
$('#listoptions').children().find('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;
});
</script>

Upvotes: 0

anpsmn
anpsmn

Reputation: 7257

You don't need to remove the class open as bootstrap does it after selection.

$('.dropdown-menu li a').on('click', function () {
    var id = $(this).attr('id');
    executeAction(id);
});

executeAction = function (id) {
    switch (id) {
        case "addnewlist":
            addNewList();
            break;
        case "renamelist":
            renameList();
            break;
        case "exportlist":
            exportList();
            break;
        case "importlist":
            importList();
            break;
        case "emptylist":
            emptyList();
            break;
        case "deletelist":
            deleteList();
            break;
    }
}

Fiddle demo

Upvotes: 2

Related Questions