Question

我有一个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。

Answer 1

请记住.click()添加要按顺序调用的处理程序。如果将.btn-create选择器添加到第一个处理程序以停止传播，则会在特定于stopPropagation()的处理程序之前调用.btn-create代码。但是，如果您在e.stopPropagation();的点击处理程序中包含.btn-create，那么它应该按预期工作。

请参阅小提琴：http://jsfiddle.net/Palpatim/vuNA7/3/

按钮项目的Bootstrap下拉列表，并在按钮单击时以编程方式关闭

1 个答案: