检测 Bootstrap 下拉菜单选择的正确方法是什么？

Question

使用 Twitter Bootstrap 和 Javascript Dropdowns feature，在 .dropdown-menu li a 单击事件中隐藏菜单的正确方法是什么，以及更新一些属性选择了什么，但没有 <a> 单击事件触发并达到其 href 值？

由于缺乏更好的文档，这就是我现在这样做的方式。但是，是否有推特 Bootstrap 作者希望我这样做的推荐方法？我的意思是，如果我所要做的就是在菜单项上添加一些属性，然后它会自动隐藏下拉列表并更新下拉切换控件上的属性，那就太好了。

<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 1

$('#listoptions a') 将被视为 #listoption 的下一个绝对子级，因此您必须在 #listoption

中找到 a

<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>

Answer 2

您不需要删除 class 打开，因为 bootstrap 在选择后会这样做。

$('.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

检测 Bootstrap 下拉菜单选择的正确方法是什么？

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

javascript

jquery

twitter-bootstrap

drop-down-menu

toggle