一般下拉框或者选择框,持久展示时会给用户显示的隐藏方式,如点击事件后。也可以添加隐式的隐藏方式,如点击弹出框之外的区域。
CSS方法-focus伪类
当触发的元素是可以focus,以输入框为例。
- 可以将弹出框出现的时机设置在input:focus时,实现弹出的效果。当focus焦点转移的时候,实现隐藏效果。
- 在弹出框容器上添加hover事件,选择点击弹出框内容时不会隐藏,保证弹出框的点击事件可以触发。
- 当选中弹出框中的项时,input焦点转移,hover事件保证弹出框显示,可以触发点击事件。然后点鼠标移出弹出框区域后,弹出框hover失效,隐藏。
缺点:
隐藏可能不太流畅;触发的元素只能是能加focuse的元素
<div class="selectorswarp">
<label for="input">输入框:</label>
<input type="text" class="selectinput" id="input"/>
<ul class="selectors" @click="clickli">
<li>s1</li>
<li>s2</li>
<li>s3</li>
</ul>
</div>
.selectinput:focus{
&+.selectors{
display: block;
}
}
.selectors{
background-color: #42b983;
height: auto;
display: none;
&:hover{
display: block;
}
}
或者使用:focus-within直接加在input元素的warp元素上.
JS方法-contains函数
Node.contains;
使用contains方法可以判断一个元素是否是判断元素的后代元素。可以在document上添加点击的监听事件,若事件的触发元素不是弹出框的后代元素,则隐藏弹出框。若是,则持续展示弹出框。
let listerSelectWarp = (e)=>{
let target = e.target,
selectorwrap = document.querySelector('.selectorswarp');
showoptions.value = selectorwrap.contains(target);
console.log('listerSelectWarp',selectorwrap.contains(target));
}
document.addEventListener('click',listerSelectWarp,);
注意:
当容易内部还有其他点击控制弹出框事件时,需要注意选择addEventListener的useCapture项,选择事件的触发方向。
缺点:
展示时需要比较明确事件的触发,比如点击事中添加类或变量控制。展示和隐藏需要控制同一样式或变量。