javascript - 在外部单击时关闭选择框

Question

我在关闭选择框时遇到问题。在网站上有两个选择元素。

第一个有效:它打开，当在外面单击时关闭框。现在我旁边有第二个盒子。这仅在您单击选择器或切换时关闭。我还希望在外部单击时将其关闭。

这是已经存在的代码:

    _closeSelectbox: function (target) {
        var inst = this._getInst(target);
        //if (!inst || !this._state[inst.uid]) {
        if (!inst || !inst.isOpen) {
            return;
        }
        var onClose = this._get(inst, 'onClose');
        inst.settings.effect === "fade" ? $("#catOptions_" + inst.uid).fadeOut(inst.settings.speed) : $("#catOptions_" + inst.uid).slideUp(inst.settings.speed);
        $("#catToggle_" + inst.uid).removeClass(inst.settings.classToggleOpen);
        this._state[inst.uid] = FALSE;
        inst.isOpen = FALSE;
        if (onClose) {
            onClose.apply((inst.input ? inst.input[0] : null), [inst]);
        }
        $.data(target, PROP_NAME, inst);
       },

这是否可能在不影响其他盒子功能的情况下实现？

这是 html:

     <div class="col-sm-8 col-xs-12">
        <form class="form-inline form-header" action="<?php echo $this-    >url(null, 'listings-search'); ?>"
              method="get">
            <div class="form-group hidden-xs hidden-sm">
                <select name="parent_id" id="category_id">
                    <option value="0"><?php echo $this->_('Choose Category'); ?></option>
                    <?php foreach ($categories as $category) { ?>
                        <option
                            value="<?php echo $category['id']; ?>" <?php echo ($category['id'] == $request->getParam('parent_id')) ? 'selected' : ''; ?>><?php echo $this->_($category['name']); ?></option>
                    <?php } ?>
                </select>
            </div>
            <div class="form-group">
                <input id="basic-search" type="text" name="keywords" class="form-control input-search"
                       value="<?php echo $this->request()->getRequest()->getParam('keywords'); ?>"
                       placeholder="<?php echo $this->_('Search ...'); ?>" required>
            </div>
            <button type="submit" class="btn btn-primary hidden-xs"><?php echo $this->_('Search'); ?></button>
        </form>
        </div>

Answer 1

我建议将模糊事件绑定(bind)到框，我很确定它会完全满足您的需要! https://api.jquery.com/blur/