如何在引導程序上觸發下拉按鈕模糊/關閉事件？

Question

我試圖在按鈕組關閉后觸發事件（以捕獲該按鈕組內的多個更改）。

<div class="btn-group">

<span id="experiment-filter-group" class="btn-group pull-right open">
<button type="button" style="width:auto" class="dropdown-toggle btn btn-small" data-toggle="dropdown">Click Here <b class="caret"></b></button>
<ul class="dropdown-menu" style="max-height: 400px; overflow-y: auto; overflow-x: hidden;">
      <li class="active"><a href="javascript:void(0);" style="padding:0;"><label style="margin:0;padding:3px 20px 3px 20px;width:100%;height:100%;cursor:pointer;"><input style="margin-bottom:5px;" type="checkbox" value="0"> X Option</label></a></li>
      <li><a href="javascript:void(0);" style="padding:0;"><label style="margin:0;padding:3px 20px 3px 20px;width:100%;height:100%;cursor:pointer;"><input style="margin-bottom:5px;" type="checkbox" value="1"> Y Option </label></a></li>
</ul>
</span>

</div>

<script>
    $('.btn-group').on("closed", function(e){
            console.log("closed");
        });
</script>

這不起作用..

Answer 1

關閉事件沒有twitter bootstrap下拉列表，但是您可以執行以下操作：

$(document).ready(function () {

    $('#btn-group').data('open', false);

    $('#dropdown-button').click(function () {
        if ($('#btn-group').data('open')) {
            $('#btn-group').data('open', false);
            onCloseEvent();
        } else $('#btn-group').data('open', true);
    });

    $(document).click(function () {
        if ($('#btn-group').data('open')) {
            $('#btn-group').data('open', false);
            onCloseEvent();
        }
    });

    function onCloseEvent() {
        alert("close");
    }
});

http://jsfiddle.net/Barbarah/QYvJh/3/