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

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>