jQuery + Bootstrap上的冲突e.stopPropagation（）

Question

我在this jsfiddle中使用Bootstrap及其dropdown.js进行了以下设计：

单击搜索条件按钮后，将显示提前下拉菜单（实际上，它是form实施dropdown.js）。这种设计的后备是每次单击form中的任何元素时，表单都将被隐藏（下拉菜单的默认行为）。因此，用户不能键入/选择任何表单的控件。该问题的解决方案很简单：

$("form input, form select")
    .click(function(e) {
    e.stopPropagation();
});

但问题是上面的代码也会影响按钮组Mode的默认行为，该按钮组是Bootstrap的Checkbox / Radio button.js的一个实例。上面的代码导致此按钮组无法更改（例如，即使您单击按钮Detailed，也将始终选择按钮High Level。）

我怎样才能使dropdown.js和button.js相互冲突？

Answer 1

只有在搜索条件表单可见时，如何停止传播？

$("form input, form select").click(function(e) {
   if ($("#searchCriteriaFormId").is(":visible") ) {  
     e.stopPropagation();
   } 
});

Answer 2

这是帮助我的代码。我没有避免使用e.stopPropagation()：

$("form.dropdown-menu, form.dropdown-menu .form-control").click(function(e) {
    e.stopPropagation();
})

$("form.dropdown-menu label.btn").click(function(e) {
    $(this).closest("form.dropdown-menu").find("label.btn").removeClass("active")
    $(this).closest("form.dropdown-menu").find("label.btn input").removeAttr("checked")

    $(this).addClass("active")
    $(this).find("input").attr("checked", "")

    e.stopPropagation();
})