精华内容
下载资源
问答
  • TableView点击某一行后显示/关闭下拉菜单功能
  • jq自定义下拉菜单,当用户点击非自身元素(下拉菜单)本身时关闭下拉菜单 截图: 代码如下: //关闭用户菜单 $(document).mousedown(function(e){ var _con = $('.drop_down'); //1. 点击事件的对象...

    jq自定义下拉菜单,当用户点击非自身元素(下拉菜单)本身时关闭下拉菜单

    截图:

    代码如下:

        //关闭用户菜单
        $(document).mousedown(function(e){
            var _con = $('.drop_down');
            //1. 点击事件的对象不是目标元素本身
            //2. 事件对象同时也不是目标元素的子元素
            if(!_con.is(e.target) && _con.has(e.target).length===0){
                $('.drop_down').css('display','none');
            }
        });

     

    转载于:https://www.cnblogs.com/phpyangbo/p/9026382.html

    展开全文
  • //点击非当前下拉菜单区域时,关闭下拉菜单 $(document).mousedown(function(e){ var _con = $('.xialacaidan'); //1. 点击事件的对象不是目标元素本身 //2. 事件对象同时也不是目标元素的子元素 ...

    jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身)

    //点击非当前下拉菜单区域时,关闭下拉菜单
    $(document).mousedown(function(e){
        var _con = $('.xialacaidan');
        //1. 点击事件的对象不是目标元素本身
        //2. 事件对象同时也不是目标元素的子元素
        if(!_con.is(e.target) && _con.has(e.target).length===0){
            $('.xialacaidan_list').css('display','none');
        }
    });

    自定义的下拉菜单,当点击其他区域时需要关闭,此方法非常适用。

    转载于:https://www.cnblogs.com/phpyangbo/p/10644017.html

    展开全文
  • 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
                }
            },
    
    展开全文
  • 这里增加一个选项,就是当我们按下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函数中也就是组件或元素销毁的时候移除事件监听,不然,这些事件监听会一直存在在内存中。

    展开全文
  • element-ui滚动组件关闭下拉菜单的问题 一、问题说明 目前前端项目中有一个现象是在一个弹窗或者页面中,滚动鼠标内容跟随滚动,打开的下拉菜单也跟随滚动,超出部分显示很不合理,测试同事提过相关问题的bug单,但...
  • //外部关闭下拉菜单 Vue.directive('clickoutside',{ // bind:只调用一次,指令第一次绑定到元素时调用,绑定时执行一次的初始化动作 // el:指令所绑定的元素,可以直接操作DOM //为了在document上绑定一个...
  • OriginPro 默认下拉菜单处于部分折叠状态,每次都需要点开就很麻烦,具体的关闭方法如下 Tools-->System Variabls ,在Variable栏输入MPA,在Value一栏输入0,然后确认即可
  • 目前项目中要实现一个功能,就是从服务器获取数据,同时实现上拉和下拉功能,在点击一行后会出现下拉菜单,再点击后会关闭下拉菜单。我觉得这样得功能在很多项目里是很常见的,所以我写了一个单机版的,大家可以直接...
  • 代码如图, 点击 div.selected 的时候 ul.dorpdown-list 就会显示 点击 li 的时候 ...其实你只要写select就可以达到你的目标““简单的方法,直接写一个div包含你要的下拉列表,加个遮罩就可以了,遮罩部分加ng-cli...
  • vue 点击出现下拉菜单,点击下拉菜单以外都要关闭菜单 2018-08-29 15:34:55周家大小姐.阅读数 5928收藏更多 分类专栏:vue2.0周家大小姐 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文...
  • bootstrap中常用到的下拉菜单dropdown-menu默认是当点击下拉菜单的任一位置就会关闭下拉菜单框了,这显然达不到很多用户需求,如何实现当点击需要点击的地方后才关闭下拉框呢,下面来简单介绍下方法,比如要做一个...
  • bootstrap中常用到的下拉菜单dropdown-menu默认是当点击下拉菜单的任一位置就会关闭下拉菜单框了,这显然达不到很多用户需求,如何实现当点击需要点击的地方后才关闭下拉框呢,下面来简单介绍下方法,比如要做一个...
  • 下面小编就为大家分享一篇js点击时关闭该范围下拉菜单之外的菜单方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 实现效果如下,可以在线体验:CSS实现下拉菜单JS实现自然不难,不过很多时候能用CSS实现的话JS的方案就不考虑了,更何况CSS实现更加简单。二、实现dom结构如下:<div class="container" tabIndex=-1> <div...
  • Vue实现外部关闭下拉菜单 先贴出效果图: 心急的小伙伴都是先看JS代码的,那么我们先主要讲的还是JS代码,全部注释都有,不懂的请耐心看完,可以留言给我: HTML代码: css代码: ...
  • <div id="app1" v-cloak> <div class="main" v-clickoutside="handleClose"> <button @click="show =!...点击显示下拉菜单</button> <div class="dropdown" v-show="show"> &l...
  • 实现思路:(a) 点击下拉菜单本身是不会关闭的  (b) 点击下拉菜单以外的所有区域都要关闭 代码实现: index.html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&...
  • 1.vue中点击除下拉菜单外的其他区域就关闭菜单 // this.showMenuList 为下拉菜单的显示判断 document.addEventListener('click', (e) => { if (!this.$el.contains(e.target)) this.showMenuList = false }) ...
  • 点击下拉菜单之外的区域,关闭下拉菜单。 1基础版 html: <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Title</title> <link rel=stylesheet ...
  • 作者:WangMin 格言:努力做好自己喜欢的每一件事 ...在移动设备上,打开一个下拉菜单会添加一个.dropdown背景作为一个点击区域,当你在菜单外点击时,可以关闭下拉菜单。这意味着从一个打开的下拉菜单切换到
  • http://wintc.top/article/16
  • 1 $(function(){ 2 $(document).bind("click",function(e){ 3 //id为menu的是菜单 4 if($(e.target)....
  • " data-stopPropagation="true" > (u.lableName)">啦啦</a> </li> </ul> </div> 控制点击下拉关闭的JS //指定要操作的元素的click事件停止传播—定义属性值data-stopPropagation的元素点击时停止传播事件 $...
  • 苹果手机下拉菜单的设置步骤如下: 1、打开主屏上的设置应用 2、在设置列表中找到控制中心一栏,点击进入 3、接下来请关闭在控制中心列表下的二个选项 4、随后我们再重新打开这二个选项,然后再尝试下拉调出通知中心...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 836
精华内容 334
关键字:

关闭下拉菜单