javascript - 单击面板外部不会关闭选择框

Question

我在处理站点过滤器时遇到了问题。如果我打开 btn-select 并在面板外单击，则选择保持打开状态。我想捕获下拉关闭事件，这样我就可以关闭 btn-select 的

    <div class="dropdown pull-right" id="site-filter">
        <a class="dropdown-toggle filter-label" data-toggle="dropdown" href="#">
            Site Filter <i class="fa fa-filter"></i>
        </a>
        <div class="dropdown-menu">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h4>Site Filter</h4>
                </div>
                <div class="panel-body">
                    <form role="form">
                        <div class="input-group input-daterange" style="">
                            <input type="text" class="input form-control" placeholder="Start Date">
                            <span class="input-group-addon">to</span>
                            <input type="text" class="input form-control" placeholder="End Date">
                        </div>

                        <a class="btn btn-select">
                            <input type="hidden" class="btn-select-input" id="" name="" value="" />
                            <span class="btn-select-value">Organization</span>
                            <span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span>
                            <ul>
                                <li>Comapny Name</li>
                            </ul>
                        </a>

                        <a class="btn btn-select">
                            <input type="hidden" class="btn-select-input" id="" name="" value="" />
                            <span class="btn-select-value">State</span>
                            <span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span>
                            <ul>
                                <li>Maryland</li>
                                <li>North Carolina</li>
                                <li>Pennsylvania</li>
                            </ul>
                        </a>

                        <a class="btn btn-select">
                            <input type="hidden" class="btn-select-input" id="" name="" value="" />
                            <span class="btn-select-value">City</span>
                            <span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span>
                            <ul>
                                <li>Baltimore</li>
                                <li>Charlotte</li>
                                <li>Raleigh</li>
                            </ul>
                        </a>
                        <hr />
                        <button type="reset" class="btn btn-primary btn-outline">Reset</button>
                    </form>
                </div>
            </div>
        </div>
<script>
$(document).ready(function () {
$(document).on('click', '.btn-select', function (e) {
    e.preventDefault();
    var ul = $(this).find("ul");
    if ($(this).hasClass("active")) {
        if (ul.find("li").is(e.target)) {
            var target = $(e.target);
            target.addClass("selected").siblings().removeClass("selected");
            var value = target.html();
            $(this).find(".btn-select-input").val(value);
            $(this).find(".btn-select-value").html(value);
        }
        ul.hide();
        $(this).removeClass("active");
    }
    else {
        $('.btn-select').not(this).each(function () {
            $(this).removeClass("active").find("ul").hide();
        });
        ul.slideDown(300);
        $(this).addClass("active");
    }
});  
});
</script>

Answer 1

添加

$("#site-filter").click(function () {
        var target = $(this).find(".active");
        console.log(target);

        $(target).each(function () {
            target.removeClass(".active");
            target.find("ul").hide();
        });
    });

解决了问题