Volomike Volomike - 5 months ago 9
jQuery Question

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>

Answer

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

Comments