我需要在 Bootstrap 按钮组中传递一些复选框,并且仅在单击 #apply
时隐藏关联的 .dropdown-menu
。
正如您在 This Demo 中看到的那样单击 list-group-item
会隐藏 .dropdown-menu
,除非您完全单击复选框
<div class="container">
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<div class="dropdown-menu list-group">
<button type="button" class="list-group-item"><input type="checkbox" name="type" value="item1"> Item 1 </button>
<button type="button" class="list-group-item"><input type="checkbox" name="type" value="item2"> Item 2</button>
<button type="button" class="list-group-item"><input type="checkbox" name="type" value="item3"> Item 3</button>
<button type="button" class="list-group-item"><input type="checkbox" name="type" value="item4"> Item 4</button>
<button type="button" class="list-group-item"><input class="btn btn-default btn-block" type="submit" value="Apply Changes" id="apply"></button>
</div>
</div>
</div>
您能否告诉我如何防止这种情况发生,并启用 #apply
按钮以正确关闭下拉菜单
?
谢谢
最佳答案
这里有一些东西:
<强> Bootply
JS:
$("#apply").on("click", function(){
$("input:checked").parent().hide().slideUp();
});
$('.list-group-item').on('click', function(e){
e.stopPropagation();
});
关于javascript - 在 Bootstrap 3 下拉菜单中点击禁用 btn-group,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31824512/