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

我不确定要测试一下触发器元素内的元素是否聚焦，但是可以像这样包装-errorOutput函数来检查它是否被悬停了：

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;
}

当孩子集中注意力时，将关闭由焦点控制的下拉菜单

1 个答案: