bootstrap和JS实现下拉菜单
// bootstrap下拉菜单
<div class="btn-group">
<button id="button_text" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#" class="a-1">Action</a></li>
<li><a href="#" class="a-1">Another action</a></li>
<li><a href="#" class="a-1">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#" class="a-1">Separated link</a></li>
</ul>
</div>
// 点击拉下框选项,替换展示内容
$(".a-1").click(function () {
var val = $(this).html();
$("#button_text").text(val)
})
bootstrap和JS实现下拉菜单的更多相关文章
- Bootstrap <基础十二>下拉菜单(Dropdowns)
Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 ...
- Bootstrap历练实例:下拉菜单插件方法的使用
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 纯css和js版下拉菜单
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- js 联动下拉菜单
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- js版本下拉菜单
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- JS实现下拉菜单的功能
<!DOCTYPE html> <html> <head> <meta charset = "utf8"> <title> ...
- BootStrap学习(2)_下拉菜单&按钮组
一.下拉菜单 1.基本下拉菜单 如需使用下列菜单,只需要在class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <ht ...
- 简单叨叨bootstrap按钮无限层级下拉菜单的实现
0.写在前面的话 最近看书都懈怠了,又正值新项目,虽说并不是忙得不可开交,好吧我老实交待,我就是偷懒了其实,博客也没更.言归正传,对于前端的不熟悉现在确实是个让我头疼的事情,以至于一些功能要在网络上漫 ...
- Bootstrap单按钮的下拉菜单
简介 把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了. 插件依赖 按钮式下拉菜单依赖下拉菜单插件 ,因此需要将此插件包含在你所使用的 Bootst ...
随机推荐
- 关于Linux系统打开最大文件数量
今天做压力测试 客户端数据提到2000人,在这个过程中,遇到了分配socket失败的问题提示 errno:24 Too many open files查找资料后发现是Linux系统配置了打开文件的最大 ...
- Go语言中的打包和工具链
包 所有Go语言的程序都会组织成若干组文件,每组文件被称为一个包.这样每个包的代码都可以作为很小的复用单元,被其他项目引用. 包名惯例 给包命名的惯例是使用包所在目录的名字.并不需要所有包的名字都与别 ...
- freeRTOS学习二
临界段,用一句话概括就是一段在执行时不能被中断的代码段. 临界段被打断的情况,一个是系统调度,还有一个就是外部中断. 对临界段的保护就是对中断的开和关. 空闲任务与阻塞延时 xTicksToDelay ...
- Hbase标准配置文件 + 增删改查
1.可用配置文件 <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href=&q ...
- gzip压缩配置
gzip on;gzip_buffers 32 4K;gzip_comp_level 6;gzip_min_length 200;gzip_types text/css text/xml applic ...
- 2019icpc银川网络赛
外面吵得风生水起,我校平静地在打比赛,丝毫不知道这次比赛的题目就是把2018银川邀请赛的题照搬过来了QAQ,主办方真牛逼.. A Maximum(思维) 题意:维护一个栈,支持入栈和出栈操作,并计算每 ...
- 详解mysql复制机制--异步复制,半同步复制和并行复制
图4 那么如何并行化,并行IO线程,还是并行SQL线程?其实两方面都可以并行,但是并行SQL线程的收益更大,因为SQL线程做的事情更多(解析,执行).并行IO线程,可以将从Master拉取和写Rela ...
- Luogu P2495 [SDOI2011]消耗战
题目 我们可以很快的想到一个单次\(O(n)\)的dp. 然后我们注意到这个dp有很多无用的操作,比如一条没有关键点的链可以直接去掉. 所以我们可以尝试一次dp中只管那些有用的点. 题目给的关键点显然 ...
- Lucky Sorting(CodeForces-109D)【思维】
题意:给出一组数,要求从小到大排序,并且排序的过程中,发生交换的两个数至少一个为幸运数(十进制位均为4或7),问能否在(2×n)次交换内完成排序,如果能,输出交换的方案(不要求步骤数最少). 思路:首 ...
- Forest Program(dfs方法---树上的环)
题意:http://acm.hdu.edu.cn/showproblem.php?pid=6736 沙漠中的每一个连通块都是一棵仙人掌:一个连通块是一棵仙人掌当且仅当连通块中不存在重边和自环,并且每一 ...