资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

js如何实现下拉菜单点击旁边收起效果-创新互联

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

10年积累的成都做网站、网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计制作后付款的网站建设流程，更有门头沟免费网站建设让你可以放心的选择与我们合作。

演示图

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://cdkjz.cn/article/esjjd.html
    返回首页 了解更多建站资讯

    相关资讯

    多年建站经验

    多一份参考，总有益处

    联系快上网，免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈，可以通过以下方式与我们联系

    业务热线：400-028-6601 / 大客户专线   成都：13518219792   座机：028-86922220

    在线咨询 提交需求
    友情链接 交换友情链接
    遂宁做网站网站建设公司微信营销品牌网站定制泸县网站建设成都做网站建设公司网站推广公司成都VI设计成都封阳台中国（西部）云计算中心

    成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询400-028-6601

    成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

    专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图