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如何實現下拉菜單點擊旁邊收起效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！