下拉框dropDown实现

最新推荐文章于 2023-03-16 08:04:31 发布
最新推荐文章于 2023-03-16 08:04:31 发布
阅读量414 收藏
点赞数
分类专栏： 前端开发 文章标签： react react.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yexudengzhidao/article/details/123742738
版权

如何实现点击面板外部收起面板，点击内部选中面板内容

实现思路：

  1. 给dropDown面板里的所有元素埋class，然后在面板最外层通过冒泡来来判断当前点击的内容是不是带有该class，来判断当前点击的是dropDown面板还是面板外的内容；
  2. Node.contains，通过这个contains方法来判断当前点击的DOM是不是在dropDown面板的元素里面

第二种更简洁、方便；

. . . . .
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
手动控制 el-dropdown 的显示和隐藏
King Saj
12-29 5721
<el-dropdown trigger="click" ref="messageDrop"></el-dropdown> this.$refs.messageDrop.hide(); this.$refs.messageDrop.show();
2021-07-01 VUE3.0下拉框回显问题
weixin_53532986的博客
07-01 952
VUE3.0下拉框回显问题 html <el-form-item label="目前法律状态" prop="lawStatus"> <el-select v-model="form.assetHouse.lawStatus" :disabled="route.query.type === 'view'" size="small" style="width: 220px;" placeholder="请选择法律状态"> <el-option
vue-dropdown-menu-Vue的下拉菜单组件。 任何元素都可以是下拉触发器，任何内容都可以下拉内容。-Vue.js开发
05-27
下拉菜单Vue的通用下拉菜单组件。 任何元素都可以是下拉触发器，任何元素都可以是下拉内容。 完全可定制的下拉菜单Vue的通用下拉菜单组件。 任何元素都可以是下拉触发器，任何元素都可以是下拉内容。 完全可定制-支持向左/向右打开，悬停/单击时打开，交互模式...安装npm i @ innologica / vue-dropdown-menu-保存或毛线添加@ innologica / vue-dropdown-menu import可以使用：import来自'@ innologica / vue-dropdown-menu'演示的DropdownMenu演示演示和文档位于https://innologica.github.io/vue-dropdown-menu/
如何实现Dropdown下拉菜单里多选且回显
weixin_54351962的博客
05-26 6241
一、思路和步骤 1.明确需求和效果 2.思路和知识点： 2.1 el-dropdown标签上写trigger=“click”，即点击时才激活展示下拉菜单内容； 2.2 el-dropdown标签里放span标签，span里面放系统选择和小图标，span标签上要绑定hGetReleaseAll点击事件，点击时则调接口获取下拉菜单中要展示的所有可供选择的选项数组allList； 2.3 span上绑定ref=‘dropdown111’，在取消按钮上绑定的点击事件@click="$refs.dropdow
element——dropdown下拉菜单点击回调传参
xiaoququ的博客
04-13 1735
下拉菜单传递参数 文档方法 < el-dropdown @command="handleCommand"> handleCommand(command) { this.$message('click on item ' + command); } 在回调里再去调用一个自定义方法传参 @command="(command) => delRoom(command, items)" <el-dropdown
2022-06-17 工作记录--Vue-手动控制 el-dropdown 的显示和隐藏
weixin_48850734的博客
06-22 1589
手动控制 el-dropdown 的显示和隐藏
Bootstrap模块dropdown实现下拉框响应
09-02
本篇文章将详细讲解如何利用Bootstrap的dropdown实现下拉框响应。 首先，我们来理解一下dropdown的基本结构。在HTML中，一个基本的Bootstrap dropdown通常包含一个触发器元素（如`<a>`或`<button>`），这个元素带有...
自定义下拉框插件dropdown.js
06-01
本文将围绕"自定义下拉框插件dropdown.js"展开，介绍如何利用jQuery实现具有个性化样式的下拉框，并探讨其与键盘事件的结合。 一、jQuery的魅力与dropdown.js的核心功能 jQuery是一个轻量级的JavaScript库，它简化...
轻量级下拉框插件Dropdown
06-01
【轻量级下拉框插件Dropdown】是一种用于网页交互设计的组件，它提供了一种高效、简洁的方式来实现多选下拉框的功能。这个插件主要用于改善用户在网页上进行选择操作的体验，特别是在需要从多个选项中进行选择时。...
jQuery实现下拉框选择图片功能实例
10-23
例如，`.jqis_header` 类用于设置下拉框的背景图像和样式，`.jqis_dropdown` 类用于设置下拉列表的样式，包括图片的排列和滚动。 4. **HTML结构**：创建一个带有`name`属性的`<select>`元素，如`...
WEB前端网页设计-Bootstrap 下拉菜单（Dropdowns）
君逍遥o
03-16 1953
下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown） JavaScript 插件 的互动来实现。
【总结】实现页面的上拉翻页和下拉刷新
Lcy's Blog
10-27 4062
学习笔记-Vue.js 上拉翻页、下拉刷新 其实总体来说平，下拉刷新要比上拉翻页复杂的对。 上拉翻页只需判断是否到达pageHeight - viewportHeight - scrollHeight = 0 的临界条件，不需要细致的判断touch问题。 下拉刷新复杂是因为除了要判断到达scrollTop = 0 （页面在顶部）的临界条件外还需继续判断是否做的是下拉动作 下拉刷新 主要思路 最初...
【web前端】原生js实现百度分页效果
Admin_pet的博客
04-27 507
最近在做一个小项目用到分页功能，在网上找了半天都没有找到合适的，于是就自己动手写了一个简单的模仿百度分页的功能函数。 效果： CSS部分采用前端H-ui库 input[type="button"] { outline: none; line-height: normal; } .btn { display: inline-block; height:...
微信小程序开发——使用Vant组件库van-dropdown-menu实现下拉列表切换页面内容
qq_17792441的博客
02-22 7996
使用Vant组件库van-dropdown-menu实现下拉列表切换页面内容 1、思路 在页面中使用hidden属性判断是否选中当前信息，再隐藏其他所有内容，仅显示所选内容。 2、代码 wxml部分 <van-dropdown-menu> <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" bind:change="onchange"/> </van-dropdown-menu> <v
vue项目修改element-ui的el-dropdown的显示隐藏
Wehter的博客
10-19 6205
项目需求 通过点击小铃铛，显示dropdown的el-dropdown的el-dropdown-menu，也就是白色背景的框 再次点击消息接收管理实现另一个菜单的出现和隐藏，同时把el-dropdown-menu隐藏 其实这个好实现，直接把消息通知和消息接收管理写入一个el-dropdown-item标签中就行,点击就隐藏 这一项是element默认为true的 <el-dropdown-menu slot="dropdown" class="project-dropdown" :style="{
vue2手写一个简单的下拉框
m0_65174477的博客
02-16 914
一个简单的下拉框
vue实现Dropdown下拉菜单
qq_32755875的博客
06-27 3478
1、需求 点击按钮出现下拉菜单 2、思路 为按钮绑定点击事件showPicker() 在按钮下另起一个div标签，用v-show绑定一个属性值isShowDropdown 在methods里定义showPicker这个方法，来控制isShowDropdown的值为true或者false，来控制下拉菜单是否展示 3、主要代码 <div> <button @click="showPicker"/> <div id="myDropdown" v-show="isShow
iview的Dropdown 下拉菜单之选中
热门推荐
scy_fighting的博客
08-23 1万+
由于项目需要，需要下拉菜单进行筛选，点击（筛选）后展示不同的页面。介于项目本身采用的技术是vue+iview，所以使用了iview自带的“Dropdown 下拉菜单”。但是自带的只展示样式，点击不同的选项，需要显示点击的选项，需要自己手动去编写。下面记录一下实现的代码：（这里在赘述一下要实现的是，点击abc，则显示abc。点击22222，显示222222） 思路：声明个变量  用dropdown...
基于iView的下拉分类多选
m0_46799593的博客
04-28 1157
基于iView的下拉分类多选： 第一次写，可能有错误的地方，还请见谅。 本来是准备用级联选择器或树形选择器做多选的，但是看了很多，对数据要求都比较搞，就放弃了。 先看下效果 <FormItem style="text-align:left;width: 20%;" :label="this.$t('行业')" prop="industry"> <Select v-model="ytzSaActivity.codeList" multiple style="
支持搜索的下拉框怎么实现
最新发布
05-20
支持搜索的下拉框可以通过以下步骤实现： 1. 创建一个包含选项的下拉列表。 2. 在下拉列表上添加一个文本框。 3. 使用JavaScript监听文本框的输入事件，并根据输入过滤下拉列表中的选项。 4. 当用户选择一个选项时，将选项的值设置为文本框的值，并关闭下拉列表。 以下是一个基本的支持搜索的下拉框的示例代码： ``` <!-- HTML代码 --> <div class="dropdown"> <input type="text" class="dropdown-search" placeholder="Search..."> <button class="dropdown-toggle" type="button" data-toggle="dropdown">Select an option</button> <ul class="dropdown-menu"> <li><a href="#">Option 1</a></li> <li><a href="#">Option 2</a></li> <li><a href="#">Option 3</a></li> <li><a href="#">Option 4</a></li> <li><a href="#">Option 5</a></li> <li><a href="#">Option 6</a></li> </ul> </div> <!-- JavaScript代码 --> <script> $('.dropdown-search').on('input', function() { var filter = $(this).val().toUpperCase(); var dropdownMenu = $(this).siblings('.dropdown-menu'); var options = dropdownMenu.find('a'); for (var i = 0; i < options.length; i++) { var option = options[i]; var text = $(option).text().toUpperCase(); if (text.indexOf(filter) > -1) { $(option).show(); } else { $(option).hide(); } } }); $('.dropdown-menu a').on('click', function() { var value = $(this).text(); $(this).closest('.dropdown').find('.dropdown-toggle').text(value); }); </script> ``` 这段代码使用了jQuery库，监听了文本框的输入事件和选项的点击事件，并根据输入过滤了选项。当用户选择一个选项时，将选项的值设置为文本框的值，并关闭下拉列表。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

. . . . .

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值