js如何实现下拉菜单点击旁边收起效果

这篇文章主要为大家展示了“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。但是当我们点击其他区域的时候下拉窗口需要停顿一会再消失，这个很诡异，所以继续想办法调整。

分析：

1. 现在确认是事件的优先级的问题了，blur要优先于click所以我们需要想办法替换掉click

2. 我们知道click事件是由mousedown事件和mouseup事件组成，同时mousedown和mouseup触发必须在同一个像素点上才会触发click事件。即鼠标点击： mousedown -> mouseup -> click

3. 所以我们来写一个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如何实现下拉菜单点击旁边收起效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！