这篇文章主要为大家展示了“js如何实现下拉菜单点击旁边收起效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“js如何实现下拉菜单点击旁边收起效果”这篇文章吧。
演示图
备注：最后的搜索跳转我直接用console代替掉了，但是并没有执行
问题抛出
当我点击上面的联想词的时候它的onSearch并不能执行
demo代码展示
计算
安全
数据库
网络和加速
企业服务
<template lang="html">
<div :class="[baseClass + '-wrap']">
<input
type="text"
v-model="searchVal"
:class="[baseClass + '-input']"
ref="demo-search-input"
placeholder="搜索"
@focus="onFoucs"
@blur="onBlur"
@keyup.enter="onSearch"
@input="getRecommendedList" />
<span :class="[baseClass + '-btn']" @click="onSearch"></span>
<div :class="[baseClass + '-recommended']" v-show="isShowRecommend && recommendList.length > 0">
<div :class="[baseClass + '-triangle-border', baseClass + '-tb-border']"></div>
<div :class="[baseClass + '-triangle-border', baseClass + '-tb-bg']"></div>
<ul :class="[baseClass + '-list-wrap']">
<li
:class="[baseClass + '-list']"
v-for="(item, index) in recommendList"
:key="index"
@click="onSearch(item)"
>{{item}}</li>
</ul>
</div>
</div>
</template><script>
const mockData = ['123456', '12', '56873', '092341', '454666677']
export default {
data () {
return {
baseClass: 'demo-search',
searchVal: '',
isShowRecommend: false,
recommendList: []
}
},
methods: {
onFoucs () {
this.isShowRecommend = true
},
onBlur () {
this.isShowRecommend = false
this.searchVal = ''
this.recommendList = []
},
onSearch (val) {
val = typeof val === 'string' ? val : this.searchVal
if (val) {
// 这里需要跳转搜索，我们用console来代替
console.log(val)
this.searchVal = ''
} else {
this.$refs['demo-search-input'].focus()
}
},
getRecommendedList () {
if (this.searchVal) {
// 这里需要给后台发送请求来获取联想词，这里我们用mock数据匹配来展示
setTimeout(() => {
const reg = new RegExp(this.searchVal)
const arr = []
for (let i = 0; i < mockData.length; i++) {
if (reg.test(mockData[i])) {
arr.push(mockData[i])
}
}
this.recommendList = arr
}, 10)
}
}
}
}
</script>上面就是我们这个效果的代码了，根据逻辑来看我们在input上面绑定了blur事件来控制清空搜索和收起联想词下拉列表，同时给list绑定了click事件，我们的预期是点击list的时候console执行然后input失去焦点收起来，但是事实是它仅仅执行了blur，onSearch事件里面的console并未执行。
猜测原因做尝试
首先第一反应绝对是事件的触发顺序，所以我就想到了利器setTimeout来验证
onBlur () {
setTimeout(() => {
this.isShowRecommend = false
this.searchVal = ''
this.recommendList = []
}, 500)
}结果果然触发了，因为延迟了blur先执行了click。但是当我们点击其他区域的时候下拉窗口需要停顿一会再消失，这个很诡异，所以继续想办法调整。
分析：
现在确认是事件的优先级的问题了，blur要优先于click所以我们需要想办法替换掉click
我们知道click事件是由mousedown事件和mouseup事件组成，同时mousedown和mouseup触发必须在同一个像素点上才会触发click事件。即鼠标点击： mousedown -> mouseup -> click
所以我们来写一个demo看一下事件的执行顺序
methods: {
onClick () {
console.log('click')
},
onMousedown () {
console.log('mousedown')
},
onMouseup () {
console.log('mouseup')
},
onBlur () {
console.log('blur')
}
}结果
最后把click替换成mousedown，完成了问题修复
<li
:class="[baseClass + '-list']"
v-for="(item, index) in recommendList"
:key="index"
@mousedown="onSearch(item)"
>{{item}}</li>最终效果展示
以上是“js如何实现下拉菜单点击旁边收起效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
