Фокус управляемое раскрывающееся меню закрывается, когда дети сосредоточены

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>