首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

Excel 创建一级、二级、三级……联动下拉菜单,一次彻底讲透它!

图片但是,很多伙伴跟小何说,只会制作普通的一级下拉菜单,遇到稍微复杂一点的二级甚至更多级的联动下拉菜单就犯难。...视频课程获取地址有时候,我们需要在右侧的下拉菜单中多添加一项,然而,发现左侧的下拉菜单是无法同步更新的。因为这是静态下拉。这时候该怎么办呢?...看最后效果:3三级下拉菜单其实掌握了二级下拉菜单三级下拉菜单甚至更多级也就掌握了,因为方法是类似的,无非就是多设置几次而已。...首先,我们先把三个菜单的内容准备好,在前面一二级菜单的基础,增加三级菜单“产品型号”。前面的一二级菜单刚刚已经设立了“连接”,接下来我们要做的就是将二级菜单和三级菜单设立连接关系。...用 Exce 制作一、二、三级下拉菜单的方法就分享到这里啦,伙伴们学会了吗?

8K10

巧用CSS3 :target 伪类制作Dropdown下拉菜单(无JS

先上效果图 正如标题所说,本文是教你如何巧用CSS3 :target 伪类制作Dropdown下拉菜单,原生HTML+CSS,无JavaScript。为了吸引各位往下看,先上实际例子,再进行剖析。...Duang~ 实际例子其实就是DeveMobile 主题的右上角那个按钮,你点一下就会有一个Dropdown下拉菜单出现,在其他区域点击返回原状。请用手机扫码查看: ?.../div> 大体上上面的HTML代码可以分为两部分,一部分是一个出发下拉动作的入口(我习惯称为“开关”)——通常是一个button(实例是将a标签替换为一个button的功能);一部分就是触发动作的下拉菜单显示了...当你触发下拉菜单后,有时候需要做关闭(返回原状)的动作,而从具体情况(比如说如本实例触发菜单后菜单将原来的开关都掩盖了)或者用户体验上考虑,最好是除菜单区域外的整个屏幕都随便盲点就能关闭菜单。...为了让下拉菜单更显“下拉”的情况,采用CSS3的origin 定位下转换原点。 注意下兼容性,所有主流浏览器均支持 :target,除了 IE8 及更早的版本,移动端的话直接用。

3.9K80

vue elementui navmenu 多级导航菜单(水平、垂直)

路由跳转(一) 组件(NavMenu.vue) 调用(app.vue) 路由跳转(二) 水平效果图 区别 问题 1 刷新页面 2 非最后一层,点击可跳转路由 3 水平菜单点击多路由时,有轮廓 4 刷新不折叠导航...id: 7, name: "accountManage", icon: "el-icon-phone-outline\r\n", alias: "帐号管理", value: "" }, //三级...position: static; vertical-align: middle; margin-left: 8px; margin-top: -3px; } /* 解决下图2 无下拉菜单时...3 水平菜单点击多路由时,有轮廓 简单粗暴的解决方法 // NavMenu.vue *{ outline:none; } 4 刷新不折叠导航...=“activeIndex”, 这里的activeIndex 和路由一致都是 entity.name 5 水平菜单过长,可滚动 添加两个style 样式在对应的位置,但是这样的话,水平菜单中有下拉菜单

5.9K20

搭建后台管理系统的思路

可能我们需要来研究 element-ui 的组件 NavMenu 导航菜单 侧边导航栏需要我们路由的一些信息,比如路由对应的组件,就像 router-link 对应的 router-view 如果菜单是二级菜单,三级菜单...,需要怎么处理 如果需要折叠菜单,需要怎么处理,这里就需要阅读 折叠菜单组件 也就是说侧边菜单来其实就是一个个的 router-link 然后扩展菜单项是否有 icon 小图标,是否有标题存在,那么路由就需要设置...面包屑 消息通知 下拉菜单 关闭展开侧边栏按钮 面包屑 需要注意什么呢?...import axios from 'axios'; import { Message, Msgbox } from 'element3'; import store from 'store/index.js...} } 当然,可以在 main.js 引入多语言 import { createApp } from 'vue' import { createI18n } from 'vue-i18n

2.7K20

第120天:移动端-Bootstrap基本使用方法

约定编码规范 HTML约定: 在head中引入必要的CSS文件,优先引用第三方的CSS,方便我们自己的样式覆盖 在body末尾引入必要的JS文件,优先引入第三方的JS,注意JS文件之间的依赖关系,比如bootstrap.js...="lib/bootstrap/js/bootstrap.js"> 24 25 26 27...Bootstrap浏览顺序 (1)预置样式 预制排版样式——按钮样式——表格样式——表单样式——图片样式——辅助工具类——代码样式——栅格系统——响应式工具类 (2)预置界面组件 导航——导航条——面包屑导航——下拉菜单...——按钮式下拉菜单——按钮组——警告框——页头——分页——列表组——面板——媒体对象——进度条——Glyphicons——大屏幕——嵌入内容——内嵌 将日常使用的一些功能块,提前写好,我们使用时,直接找到对应的...(3)javascript插件 内置组件 模态对话框——下拉菜单——滚动监听——标签页——工具提示——弹出框——警告框——按钮——折叠面板——轮播图——吸顶效果

3.2K40

JQuery笔记(三) jquery的用途

近期jquery的学习经历了一些反复:开始时觉得非常强大,比js好用,和css关系密切,一句话:完美。等到把《锋利的JQuery》看完,又有点不知道用它来干嘛了。...而jquery却可以实现这样的效果:所有的数据获取功能在服务器端完成,而界面控制,放到js代码中,在客户端去实现,即使界面控制失败了,重要的数据仍然可以看到。...今天尝试了一下最常用的一个东西:折叠菜单。实现了以下功能: 数据是纯粹的DIV,UL结构,没有任何的特定的东西,如:特定的命名方式、内嵌的处理代码等。...实现了最多三级的菜单折叠(给定的数据有几级就显示几级) 自动查找图标。按照菜单的位置编码自动查找图标,找到就显示。...一级菜单的图标形如tb0.jpg,tb1.jpg…;二级的形如tb00.jpg,tb01.jpg… 展开菜单后则自动将同级的其他菜单折叠,节省空间 自定义图标大小,缩进距离,三级菜单字体大小等 初始化时展开指定的菜单

2K90

Bootstrap笔记

respond让低版本浏览器可以支持CSS媒体查询功能基础CSS样式概要预置排版样式统一预制标签样式按钮样式表格样式表单样式图片样式辅助工具类代码样式栅格系统响应式工具类预置界面组件导航导航条面包屑导航下拉菜单按钮式下拉菜单按钮组输入框组警告框页头分页列表组面板媒体对象进度条...Glyphicons标签徽章缩略图大屏幕嵌入内容内嵌JavaScript插件JavaScript插件的依赖情况如何使用Javascript插件内置组件模态对话框下拉菜单滚动监听标签页工具提示弹出框警告框按钮折叠面板轮播图吸顶效果...预置排版样式 统一预制标签样式 按钮样式 表格样式 表单样式 图片样式 辅助工具类 代码样式 栅格系统 响应式工具类 预置界面组件 导航 导航条 面包屑导航 下拉菜单...按钮式下拉菜单 按钮组 输入框组 警告框 页头 分页 列表组 面板 媒体对象 进度条 Glyphicons 标签 徽章 缩略图 大屏幕 嵌入内容 内嵌 JavaScript插件 JavaScript...插件的依赖情况 如何使用Javascript插件 内置组件 模态对话框 下拉菜单 滚动监听 标签页 工具提示 弹出框 警告框 按钮 折叠面板 轮播图 吸顶效果 data-spy=”affix” data-offset-top

3.3K90

BootStrap应用开发学习入门1

下拉菜单 #Bootstrap .class 样式解释 .dropdown 指定下拉菜单都包裹在div标签或者ul标签下 .dropup 指定向上弹出的下拉菜单 .dropdown-menu 创建下拉菜单....dropdown-menu-right 下拉菜单右对齐 .dropdown-header 向下拉菜单的标签区域添加标题提示 .disabled 下拉菜单中的禁用项 .divider 下拉菜单中的分割线...编译(同时)引用:使用 bootstrap.js 或压缩版的 bootstrap.min.js。 Bootstrap 为大多数插件的独特行为提供了自定义事件。...不要尝试同时引用这两个文件,因为 bootstrap.js 和 bootstrap.min.js 都包含了所有的插件。...WeiyiGeek. 10.折叠(Collapse) 描述:折叠(Collapse)插件可以很容易地让页面区域折叠起来。

44.7K21

下拉菜单11+原生js获取select下拉框的selected的option项

数组转json并在后台对其解析具体实现 想必大家在开发过程中也遇到类似问题,如果直接将js获取的数组传给后台,后台是无法区分数组的,因为js数组如果是二维的就是这样的:1,张三,23,2,李四,26...希望能给大家带去帮助 首先需要在js里面对数组进行转换为json格式 js代码如下: 代码如下: /**      *js数组转json      *      */     function arrayToJson...// 记 性不好的可以收藏下: 1,下拉框: var cc1 = $(".formc select[name='country'] option[selected]").text(); //得到下拉菜单的选中项的文本...(注意中间有空格) var cc2 = $('.formc select[name="country"]').val(); //得到下拉菜单的选中项的值 var cc3 = $('.formc select...[name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值 $("#select").empty();//清空下拉框 //$("#select").html(

60140

BootStrap应用开发学习入门1

下拉菜单 #Bootstrap .class 样式解释 .dropdown 指定下拉菜单都包裹在div标签或者ul标签下 .dropup 指定向上弹出的下拉菜单 .dropdown-menu 创建下拉菜单....dropdown-menu-right 下拉菜单右对齐 .dropdown-header 向下拉菜单的标签区域添加标题提示 .disabled 下拉菜单中的禁用项 .divider 下拉菜单中的分割线...编译(同时)引用:使用 bootstrap.js 或压缩版的 bootstrap.min.js。 Bootstrap 为大多数插件的独特行为提供了自定义事件。...不要尝试同时引用这两个文件,因为 bootstrap.js 和 bootstrap.min.js 都包含了所有的插件。...1.过渡效果(Transition) 如果您想要单独引用该插件的功能,那么除了其他的 JS 文件,您还需要引用 transition.js它是 transitionEnd 事件和 CSS 过渡效果模拟器的基本帮助器类

44.2K20

深入理解bootstrap

垂直分组使用.btn-group-vertical样式 5.在一个.btn-group容器上,如果使用了.btn-group-justified样式,则所有的按扭会100%充满容器元素,自适应的功能 D.按扭下拉菜单...1.利用data-toggle=""来实现下拉菜单 2.样式.dropup向上的下拉菜单 E.输入框组 1.输入框组,.input-group样式,输入框前后显示的个性元素上可以使用.input-group-addon...用法:$('#id').modal() 4.支持四种事件订阅:show.bs.modal、shown.bs.modal、hide.bs.modal、hidden.bs.modal C.下拉菜单 1.一般在导航条...alert()或$(xxx).alert('close'); I.按扭 普通button使用data-toggle="button",input需要使用data-toggle="buttons" J.折叠...1.data-toggle="collapse"配合data-target=""使用,折叠区域使用collapse和in样式 2.默认隐藏折叠区域,触发元素上添加一个.collapsed样式,去掉折叠区域的

3.4K60
领券