javascript - 当 children 集中注意力时，焦点控制的下拉菜单关闭

Question

我有一个下拉菜单，它使用焦点和模糊事件来打开和关闭菜单。目前，一切正常，除非您将注意力集中在菜单内的某个元素上，从而导致它因触发元素 .menu-trigger 失去焦点而关闭。

预期的行为是当用户在 .menu-trigger 元素外部单击时菜单关闭，但目前它也会在内部元素获得焦点时关闭。如果焦点位于 .menu-trigger 中的元素，是否有办法防止菜单关闭？

function menuOpen(options) {
    options = $.extend(true, {
        triggerSelector: null,
        relativeContentSl: '.defaultselector',
    }, options || {});

    const $TRIGGER = $(options.triggerSelector);
    $TRIGGER.addClass('is-open').find(options.relativeContentSl).removeClass('hide');

}

function menuClose(selector) {
    $(selector).removeClass('is-open').find('.menu-content').addClass('hide');
}


const TRIGGER_SELECTOR = '.menu-trigger';
const CONTENT_SELECTOR = '.menu-content';

$('body').on('click', '.menu-trigger:not(.is-open)', function (e) {
    menuOpen({
        triggerSelector: this,
        relativeContentSl: CONTENT_SELECTOR,
    });
})

$('body').on('blur', TRIGGER_SELECTOR, function () {
    menuClose(this);
})

.hide {
    display: none;
}

.menu-content {
    border: 2px solid red;
    padding: 5px;
}

<div class="menu-trigger" tabindex="1">
    <div class="menu-btn">
        Click Me
    </div>
    <div class="menu-content hide">

        <!-- example content  -->
        <button>Clicking this closes the menu</button>
        <p>Clicking this doesn't</p>

    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

我已经尝试过使用 event.stopPropagation() 但这会阻止菜单内任何我不想要的预期行为。

Answer 1

我不确定是否要测试触发元素内的元素是否获得焦点，但您可以通过包装 menuClose() 函数来检查它是否被悬停，如下所示:

if (!$(this).is(':hover')) {
    menuClose(this);
}

令人惊讶的是，这在移动设备上也很有效，下面是证明这一点的完整代码段:

function menuOpen(options) {
    options = $.extend(true, {
        triggerSelector: null,
        relativeContentSl: '.defaultselector',
    }, options || {});

    const $TRIGGER = $(options.triggerSelector);
    $TRIGGER.addClass('is-open').find(options.relativeContentSl).removeClass('hide');

}

function menuClose(selector) {
    $(selector).removeClass('is-open').find('.menu-content').addClass('hide');
}


const TRIGGER_SELECTOR = '.menu-trigger';
const CONTENT_SELECTOR = '.menu-content';

$('body').on('click', '.menu-trigger:not(.is-open)', function (e) {
    menuOpen({
        triggerSelector: this,
        relativeContentSl: CONTENT_SELECTOR,
    });
});

$('body').on('blur', TRIGGER_SELECTOR, function () {

    if (!$(this).is(':hover')) {
        menuClose(this);
    }

});

.hide {
    display: none;
}

.menu-content {
    border: 2px solid red;
    padding: 5px;
}

<div class="menu-trigger" tabindex="1">
    <div class="menu-btn">
        Click Me
    </div>
    <div class="menu-content hide">

        <!-- example content  -->
        <button>Clicking this now doesn't close the menu!</button>
        <p>Clicking this doesn't</p>

    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>