// 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实现下拉菜单的更多相关文章

  1. Bootstrap <基础十二>下拉菜单(Dropdowns)

    Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 ...

  2. Bootstrap历练实例:下拉菜单插件方法的使用

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. 纯css和js版下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. js 联动下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. js版本下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. JS实现下拉菜单的功能

    <!DOCTYPE html> <html> <head> <meta charset = "utf8"> <title> ...

  7. BootStrap学习(2)_下拉菜单&按钮组

    一.下拉菜单 1.基本下拉菜单 如需使用下列菜单,只需要在class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <ht ...

  8. 简单叨叨bootstrap按钮无限层级下拉菜单的实现

    0.写在前面的话 最近看书都懈怠了,又正值新项目,虽说并不是忙得不可开交,好吧我老实交待,我就是偷懒了其实,博客也没更.言归正传,对于前端的不熟悉现在确实是个让我头疼的事情,以至于一些功能要在网络上漫 ...

  9. Bootstrap单按钮的下拉菜单

    简介 把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了. 插件依赖 按钮式下拉菜单依赖下拉菜单插件 ,因此需要将此插件包含在你所使用的 Bootst ...

随机推荐

  1. Swift3.0封装 AFN 的 GET&POST网络请求

    // // PSNetWorkManage.swift // WeiBoSwift // // Created by 思 彭 on 16/9/25. // Copyright © 2016年 思 彭. ...

  2. SqlServer:SqlServer(服务器磁盘监控,创建管理员账号分配权,添加链接服务器,查询CPU,查询内存)

    1.服务器磁盘监控 (1)总链接服务上开启所有链接服务器的RPC: ----------------------总链接服务器上面,开启每个服务器的RPC --exec sp_serveroption ...

  3. k8s 网络模型解析之原理

    今天研究了一下k8s的网络模型,该解析基于flannel vxlan+ kubeproxy iptables 模式. 一.Docker 首先分析一下Docker层面的网络模型,我们知道容器是基于内核的 ...

  4. golang 操作ceph object storage

    ceph的object storage 提供了和amazon s3兼容的接口以供客户访问. 在ceph的官网上,可以看到它提供了多种语言的访问范本,例如python的(http://docs.ceph ...

  5. rocksdb wiki文档阅读笔记

    由于是英文文档,不做笔记过一阵就忘了,现在把关键点记录到这,开发的时候使用. 具体wiki地址:https://github.com/facebook/rocksdb/wiki 1)Column Fa ...

  6. 【笔记】7天玩转容器&CKA管理员实训

    第一部分 day1,容器基础知识介绍 安装 apt-get install docker-engine [root@cce-7day-fudonghai-24106 01CNL]# docker -v ...

  7. 爬虫学习笔记之为什么要设置超时时间,怎么设置(使用selenium)

    一个程序没有设置超时时间,就可以说是一段有缺陷的代码. 读取超时指的就是客户端等待服务器发送请求的时间.(特定地,它指的是客户端要等待服务器发送字节之间的时间.在 99.9% 的情况下这指的是服务器发 ...

  8. redhat 5中ifconfig不能使用问题

    ifconfig不能使用问题 输入 ifconfig 命令的绝对路径, ifconfig在是/sbin这个目录下面, 所以在终端输入下列命令就可以运行此命令:/sbin/ifconfig 我们还可以修 ...

  9. 有关java5以后的线程

    创建线程的方式 方式一 继承于Thread类 /** * 多线程的创建,方式一:继承于Thread类 * 1. 创建一个继承于Thread类的子类 * 2. 重写Thread类的run() --> ...

  10. 异或运算符(^)、与运算符(&)、或运算符(|)、反运算符(~)、右移运算符(>>)、无符号右移运算符(>>>)

    目录 异或(^).异或和 的性质及应用总结 异或的含义 异或的性质:满足交换律和结合律 异或的应用 按位 与运算符(&) 按位 或运算符(|) 取 反运算符(~) 右移运算符(>> ...