我认为这个问题很简单。代码如下。
<button onclick="toggleMenu()">Show Menu</button>
<div id="parent" class="hidden">
<input type="text"></input>
<input type="text"></input>
<input type="text"></input>
</div>
<script>
let parent = document.getElementById('parent');
parent.addEventListener('focus', function () {
// show parent
});
parent.addEventListener('blur', function () {
// hide parent
});
</script>
这个想法parent
就像是汉堡菜单。它具有一个外部元素,您可以在其中切换其可见状态。出于可访问性原因,我想了解如何制作visible
或showing
基于输入字段的重点。
这是可能吗?
上面的代码有效,但是我担心onblur()
,onfocus()
每次用户更改输入字段时都会被调用。
您可以在父项上观看mousedown或touchstart事件。如果我没记错的话,您可以检查目标元素是否包含在父元素中,如果是,请阻止事件停止下一个事件,因此不会发生模糊。
这种行为的主要缺点是该动作不是在单击事件上触发的,并且用户不能仅通过将光标从按住鼠标按钮的菜单项移开就取消该动作。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句