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

【问题标题】：What is the proper way to detect Bootstrap dropdown menu selections?检测 Bootstrap 下拉菜单选择的正确方法是什么？
【发布时间】：2015-03-06 07:00:02
【问题描述】：

使用 Twitter Bootstrap 和 Javascript Dropdowns feature，隐藏 .dropdown-menu li a 点击事件上的菜单以及更新所选内容的某些属性的正确方法是什么，而不触发 <a> 点击事件并继续关闭到它的href 值？

由于缺乏更好的文档，这就是我现在这样做的方式。但是，是否有推荐的方式让 Twitter 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>

【问题讨论】：

$('#listoptions a').click(function(e){});我认为不是 'A'，它是 'a' 或 $('#listoptions').children().find('a').click(function(){});
大写A有效。通常我会在选择器中使用大写字母来寻址 HTML 标签，以便于阅读。
$('#listoptions').children().find('a').click(function(e){}) 试试看..

标签： javascript jquery twitter-bootstrap drop-down-menu toggle

【解决方案1】：

您不需要像 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

【讨论】：

【解决方案2】：

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

【讨论】：