Question

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

Answer 1

您不需要在选择后自动删除该类。

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

Answer 2

$('#listoptions a')将被视为#listoption的下一个绝对子女，因此您必须在a中找到#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>

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

2 个答案: