我有一个 Bootstrap 2.3.2 按钮下拉菜单。我在下拉菜单中有复选框和一个按钮。如果我单击任何复选框,尤其是单击按钮,我想保持下拉菜单处于打开状态。一旦按钮后面的操作完成,我想手动关闭下拉菜单。这是HTML:
<div class="btn-group">
<input type="hidden" name="order_item_id" value="<?=$item->id?>">
<button data-toggle="dropdown" class="btn btn-mini dropdown-toggle" data-container="body"><i class="icon icon-plus"></i> Create tasks <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><label class="checkbox"><input type="checkbox" name="create_tmpl_tasks1" id="form_create_tmpl_tasks1">Order material</label></li>
<li><label class="checkbox"><input type="checkbox" name="create_tmpl_tasks2" id="form_create_tmpl_tasks2">Order accessories</label></li>
<li><label class="checkbox"><input type="checkbox" name="create_tmpl_tasks3" id="form_create_tmpl_tasks3">Order CNC parts</label></li>
<li class="divider"></li>
<li><label class="checkbox"><input type="checkbox" name="create_tmpl_tasks4" id="form_create_tmpl_tasks4">SW development (confirm delivery)</label></li>
<li><label class="checkbox"><input type="checkbox" name="create_tmpl_tasks5" id="form_create_tmpl_tasks5">HW development (confirm delivery)</label></li>
<li class="divider"></li>
<li><label class="checkbox"><input type="checkbox" name="create_tmpl_tasks6" id="form_create_tmpl_tasks7">Order ALU</label></li>
<li><label class="checkbox"><input type="checkbox" name="create_tmpl_tasks7" id="form_create_tmpl_tasks8">Mill CNC parts</label></li>
<li><label class="checkbox"><input type="checkbox" name="create_tmpl_tasks8" id="form_create_tmpl_tasks9">Anodize</label></li>
<li><label class="checkbox"><input type="checkbox" name="create_tmpl_tasks9" id="form_create_tmpl_tasks10">Laser gravure</label></li>
<li class="divider"></li>
<li class="action"><button type="button" class="btn btn-small btn-create">Create</button></li>
</ul>
</div>
如果我单击带有此代码的复选框,我已经设法禁用下拉关闭:
$('.dropdown-menu input, .dropdown-menu label').click(function(e) {
e.stopPropagation();
});
如果我在此选择器中也包含该按钮,则该按钮将不会接收点击事件,这是我不想要的。我想在按钮单击时执行一些 AJAX 调用,当我得到结果时,我想关闭下拉菜单。像这样的东西:
$('.btn-create').live('click', function(e){
e.preventDefault();
var btn = $(this);
btn.button('loading');
$.ajax({
url: 'url',
dataType: 'json',
type: "POST",
success: function(data) {
btn.button('reset');
// close drop down here
},
error:function (xhr, ajaxOptions, thrownError){
btn.button('reset');
}
});
});
这是jsFiddle。