精华内容
下载资源
问答
  • 这里增加一个选项,就是当我们按下esc键的时候,下拉菜单也可以关闭。 先贴出代码: <template> <div v-cloak v-clickoutside="outsideClose" class="dropmain"> ...

    我们来看下常见的下拉菜单:
    在这里插入图片描述

    这里我们点击菜单,下拉菜单就会显示,点击下拉菜单以外的区域就会隐藏。

    这是一个简单的例子:
    在这里插入图片描述

    这里增加一个选项,就是当我们按下esc键的时候,下拉菜单也可以关闭。
    先贴出代码:

    <template>
      <div v-cloak v-clickoutside="outsideClose" class="dropmain">
        <div @click="show = !show" class="dropbutton">
          测试下拉菜单
        </div>
        <div class="dropdown" v-show="show">
          <P>点击下拉菜单显示菜单内容,点击外部区域可关闭下拉菜单</P>
        </div>
      </div>
    </template>
    
    <script>
      export default {
        name: "DropDown",
        data() {
          return {
            show: false,
          }
        },
        directives: {
          clickoutside: {
            bind(el, binding, vnode) {
              function documentHandler(e) {
                if (el.contains(e.target)) {
                  return false
                }
                if (binding.expression) {
                  binding.value(e)
                }
              }
    
              function KeyUp(e) {
                if (e.keyCode == 27) {
                  if (binding.expression) {
                    binding.value(e)
                  }
                }
              }
              el.__vueClickOutSize__ = documentHandler
              el.__vueKeyup__ = KeyUp
              
              document.addEventListener('keyup', KeyUp)
              document.addEventListener('click', documentHandler)
            },
            unbind(el, binding) {
              document.removeEventListener('click', el.__vueClickOutSize__)
              delete  el.__vueClickOutSize__
    
              document.removeEventListener('keyup', el.__vueKeyup__)
              delete  el.__vueKeyup__
            }
          }
        },
        methods: {
          outsideClose() {
            this.show = false
          }
        }
      }
    </script>
    
    <style scoped>
      [v-cloak] {
        display: none;
      }
    
      .dropmain {
        width: 150px;
      }
    
      .dropbutton {
        display: block;
        width: 100%;
        padding: 5px;
        color: #fff;
        background-color: #39f;
        text-align: center;
        font-size: 12px;
        border-radius: 4px;
        cursor: pointer;
        outline: none;
        user-select: none;
      }
    
      .dropdown {
        width: 100%;
        padding: 5px;
        font-size: 12px;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
        text-align: left;
        margin-top: 2px;
      }
    
    </style>
    
    

    我们先来看下el,binding,vnode分别是什么:
    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    其中这里的主要逻辑是:如果点击区域是在元素内部,那么返回。如果绑定了expression,在这里我们需要的是一个函数,那么就执行用户自定义的函数方法。

    注意这里的expression可能值有很多,如果你不注意写了其他的那么程序可能不会达到你的预期。

     binding.value(e)
    

    这个大家在看上面的具体内容时都知道了 binding.value是一个函数,用来执行用户绑定的expression,也就是函数。
    在这里插入图片描述

    el.__vueClickOutSize__
     el.__vueKeyup_
    

    这两个是我们自己声明的变量,因为在vue2.x中不能使用this.xxxx的形式在上下文中声明一个变量,它们的作用是在unbind函数中也就是组件或元素销毁的时候移除事件监听,不然,这些事件监听会一直存在在内存中。

    展开全文
  • 今天小编就为大家分享一篇解决bootstrap中下拉菜单点击后不关闭的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue点击其他区域关闭下拉菜单

    千次阅读 2019-11-30 09:30:46
    mounted() { //点击其他区域关闭下拉菜单 document.addEventListener('click', (e) => { if (!this.$el.contains(e.target)) this.show = false ...
         mounted() {
                //点击其他区域关闭下拉菜单
              document.addEventListener('click', (e) => {
                  if (!this.$el.contains(e.target)) 
                   this.show = false
                })
            },
    

    this.show = false 在data定义的show

       data() {
                return {
                    show: false
                }
            },
    
    展开全文
  • 下面小编就为大家分享一篇js点击时关闭该范围下拉菜单之外的菜单方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了Element Dropdown下拉菜单的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 我们这一篇来用JavaScript脚本实现下拉菜单的显示和隐藏。使用JavaScript方法实现我们需要用的知识有: 1)JS事件:onmouseover鼠标经过事件和onmouseout鼠标离开事件。 2)JS基础语法:使用function关键字定义函数。 ...
  • element-ui滚动组件关闭下拉菜单的问题 一、问题说明 目前前端项目中有一个现象是在一个弹窗或者页面中,滚动鼠标内容跟随滚动,打开的下拉菜单也跟随滚动,超出部分显示很不合理,测试同事提过相关问题的bug单,但...

    element-ui滚动组件关闭下拉菜单的问题

    一、问题说明

    目前前端项目中有一个现象是在一个弹窗或者页面中,滚动鼠标内容跟随滚动,打开的下拉菜单也跟随滚动,超出部分显示很不合理,测试同事提过相关问题的bug单,但因为时间问题只是修改了单个页面,这个问题属于全局性问题,所以这次把整改的思路整理一下:先看图
    在这里插入图片描述

    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201224155732677.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjI5NDg0NA==,size_16,color_FFFFFF,t_70
    二:描述问题

    由于下拉菜单包含(s-select-dropdown、s-time-pane1、s-picker-pane1、下拉菜单、自定义的下拉等),含有默认层级z-index,高出s-dialog的层级,故滚动鼠标时会超出弹窗或页面,引起显示问题。注: element-ui也有这个问题

    二:解决方案

    1:修改弹窗组件层级,让他高于下拉组件菜单的层级(这个方案想过,but…因为下拉组件的层级不一定,而且所有下拉是通过position: absolue,绝对定位的方法写的,超出弹窗,但页面的层级也依然会显示)
    position定位是相对于父级而言的,页面的层级不好控制,也会引起其他相应bug,故放弃。
    2:增加自定义指令事件v-dialogClose,在给需要,组件关闭地方添加,可以,但是弹窗太多,工作量太大,放弃。
    3:我的方案:
    a: 所有的问题都是因为滚动鼠标引起的,所以从s-scrollbar组件入手
    b: outSideClick参数是个布尔值,默认为true,默认滚动事件发生时关闭下拉,(弹窗太多),不需要关闭的outSideClick=“false”,就可以了
    c: 监听滚动事件,判断outSideClick为true时,执行以下代码:

    closeAllDropDown() { // 滚动鼠标 关闭所有下拉显示框
          const SELECTWRAP_BODY = document.body // body
          const SELECTWRAP_DOWNALL = document.querySelectorAll('.s-select-dropdown') // select下拉框
          const SELECTWRAP_TIMEALL = document.querySelectorAll('.s-time-panel') // 时间下拉框
          const SELECTWRAP_DATEALL = document.querySelectorAll('.s-picker-panel') // 日期下拉框
          SELECTWRAP_BODY.click()
          SELECTWRAP_DOWNALL.forEach((item) => {
            item.style.display = 'none'
          })
          SELECTWRAP_TIMEALL.forEach((item) => {
            item.style.display = 'none'
          })
          SELECTWRAP_DATEALL.forEach((item) => {
            item.style.display = 'none'
          })
     },
    
    展开全文
  • 微信小程序没有自带的下拉菜单组件,因此我们需要自己需要写一个 思路 利用列表来存储菜单项,在外面套一个view元素作为外框,将其设置为overflow:hidden,使用CSS3动画逐渐改变外层view元素的高度,当高度为0时,...
  • TableView点击某一行后显示/关闭下拉菜单功能
  • vue 点击出现下拉菜单,点击下拉菜单以外都要关闭菜单 2018-08-29 15:34:55周家大小姐.阅读数 5928收藏更多 分类专栏:vue2.0周家大小姐 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文...

    vue 点击出现下拉菜单,点击下拉菜单以外都要关闭菜单

    2018-08-29 15:34:55 周家大小姐. 阅读数 5928  收藏 更多

    分类专栏: vue2.0 周家大小姐

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    本文链接:https://blog.csdn.net/qq_40190624/article/details/82184103

     
    1. <template>

    2. <div class="home" v-cloak>

    3.  
    4. <div class="menu">

    5. <p>下拉菜单</p>

    6. <div class="main" v-clickoutside="handleClose">

    7. <button @click="show = !show">点击显示下拉菜单</button>

    8. <div class="dropdown" v-show = "show">

    9. <p>下拉框的内容,点击外面区域可以关闭</p>

    10. </div>

    11. </div>

    12. </div>

    13. </div>

    14. </template>

    15. <script>

    16. export default {

    17. data() {

    18. return {

    19.  
    20. show:false

    21. };

    22. },

    23.  
    24. // 下拉菜单

    25. handleClose(){

    26. this.show = false;

    27. }

    28. },

    29. // 自定义指令clickoutside绑定了一个函数handleClose用来关闭菜单

    30. directives:{

    31. clickoutside:{

    32. bind:function(el,binding,vnode){

    33. function documentHandler(e){

    34. if(el.contains(e.target)){

    35. return false;

    36. }

    37. if(binding.expression){

    38. binding.value(e)

    39. }

    40. }

    41. el._vueClickOutside_ = documentHandler;

    42. document.addEventListener('click',documentHandler);

    43. },

    44. unbind:function(el,binding){

    45. document.removeEventListener('click',el._vueClickOutside_);

    46. delete el._vueClickOutside_;

    47. }

    48. }

    49. }

    50.  
    51. };

    52. </script>

    53. <style lang="less" scoped>

    54. // 作用是取消数据绑定时出现的代码闪烁

    55. [v-cloak] {

    56. display: none;

    57. }

    58. table {

    59. border: 1px solid #e9e9e9;

    60. border-collapse: collapse;

    61. border-spacing: 0;

    62. // 隐藏表格中空单元格上的边框和背景:

    63. empty-cells: show;

    64. }

    65. th,

    66. td {

    67. padding: 8px 16px;

    68. border: 1px solid #e9e9e9;

    69. text-align: left;

    70. }

    71. th {

    72. background: #f7f7f7;

    73. color: #5c6b77;

    74. font-weight: 600;

    75. white-space: nowrap;

    76. }

    77. .menu{

    78. border: 1px solid #ccc;

    79. }

    80. </style>

    81.  
    82.  
    83.  
    84.  

     

    展开全文
  • jq自定义下拉菜单,当用户点击非自身元素(下拉菜单)本身时关闭下拉菜单 截图: 代码如下: //关闭用户菜单 $(document).mousedown(function(e){ var _con = $('.drop_down'); //1. 点击事件的对象...
  • 今天我们要来分享一款比较简单清新的CSS3下拉菜单,这款下拉菜单是垂直方向的,点击主菜单项可以展开和折叠子菜单,在展开折叠的过程中伴随着淡入淡出的动画效果。另外这款CSS3垂直下拉菜单的色彩可以自己配置,是...
  • jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身) //点击非当前下拉菜单区域时,关闭下拉菜单 $(document).mousedown(function(e){ var _con = $('....
  • CSS3菜单实例,运用纯CSS3技术实现一款下拉手风琴菜单功能,其实不能说是关闭,应该来说是折叠或收缩了,点击菜单面板右上角的小三角,本级菜单的子菜单项就会折叠收起来,貌似关闭了一样,这种菜单也叫手风琴菜单,...
  • 交互方面,点击某一级菜单关闭兄弟子菜单,点击某子菜单关闭所有菜单。 1.使用dt做出第一级菜单 2.使用dd嵌套第二级菜单,初始隐藏、position为absolute,使用z-index浮出页面层 /*总菜单容器*/ .menu {  display...
  • vant里面的下拉菜单 取消

    千次阅读 2020-11-04 14:35:36
    van-popup v-model="showArea" position="bottom"> <van-picker show-toolbar ref="cityPicker" position="bottom" :columns="columns" :key="provinceDm" @change="areaCityPicke.
  • 然而当编写自定义下拉列表的时候,就会碰到一个问题:如果用户在下拉列表的范围外进行鼠标点击的操作,如何关闭已经打开的下拉列表? 解决思路如下:在 DOM 的根节点上添加一个 click 事件,同时下拉列表内阻止事件...
  • 鼠标点击超链接后显示下拉菜单,点击空白处关闭下拉菜单</p>
  • OriginPro 默认下拉菜单处于部分折叠状态,每次都需要点开就很麻烦,具体的关闭方法如下 Tools-->System Variabls ,在Variable栏输入MPA,在Value一栏输入0,然后确认即可
  •  web页面中,我们一般不用select、option来实现下拉菜单效果,因为下拉框的样式丑且难以美化,所以我们选择控制ul显示隐藏来实现同样且高大上的效果,但是不能像下拉框那样点击页面其他部分,下拉菜单收起或隐藏,...
  • 如何截图下拉菜单

    千次阅读 2018-07-11 21:25:18
    使用QQ自带截图工具。 QQ客户端截图默认快捷键是Ctrl + Alt + A。将快捷键改为 Ctrl+非Alt的某个键即可。原因是Alt键会触发收起弹出菜单的操作。 该方法在Windows10系统上验证可行。...
  • http://wintc.top/article/16
  • 点击下拉菜单之外的区域,关闭下拉菜单。 1基础版 html: <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Title</title> <link rel=stylesheet ...
  • layui下拉菜单的按钮组

    万次阅读 热门讨论 2019-05-08 17:52:23
    直接用菜单导航改的样式,自己是前端菜鸡,直接用的内嵌样式不介意的可以拿去自己改改 <div class="layui-btn-group" style="float:right;padding:5px 15px 0px 20px;"> <button class="layui-btn layui...
  • 目前项目中要实现一个功能,就是从服务器获取数据,同时实现上拉和下拉功能,在点击一行后会出现下拉菜单,再点击后会关闭下拉菜单。我觉得这样得功能在很多项目里是很常见的,所以我写了一个单机版的,大家可以直接...
  • 本篇文章主要介绍了解决bootstrap下拉菜单点击立即隐藏bug的方法,具有一定的参考价值,有兴趣的可以了解一下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 59,668
精华内容 23,867
关键字:

关闭下拉菜单