网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

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

这篇文章主要为大家展示了“js如何实现下拉菜单点击旁边收起效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“js如何实现下拉菜单点击旁边收起效果”这篇文章吧。

创新互联是工信部颁发资质IDC服务器商,为用户提供优质的四川服务器托管服务

演示图

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

备注:最后的搜索跳转我直接用console代替掉了,但是并没有执行

问题抛出

当我点击上面的联想词的时候它的onSearch并不能执行

demo代码展示



 
 
  0">
  
  
      
  • {{item}}
  •     

    上面就是我们这个效果的代码了,根据逻辑来看我们在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')
      }
    }

    结果

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

    最后把click替换成mousedown,完成了问题修复

  • {{item}}
  • 最终效果展示

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

    以上是“js如何实现下拉菜单点击旁边收起效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


    分享题目:js如何实现下拉菜单点击旁边收起效果
    文章出自:http://bjjierui.cn/article/pogsji.html

    其他资讯