我有一个下拉菜单,它使用焦点和模糊事件来打开和关闭菜单。目前,一切正常,除非您将注意力集中在菜单内的某个元素上,从而导致它因触发元素 .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()
但这会阻止菜单内任何我不想要的预期行为。
最佳答案
我不确定是否要测试触发元素内的元素是否获得焦点,但您可以通过包装 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>
关于javascript - 当 children 集中注意力时,焦点控制的下拉菜单关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52780111/