// 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. mysql 严重锁表解决方案

    转自 http://blog.csdn.net/miltonzhong/article/details/20562587 http://wangwei3.iteye.com/blog/784435

  2. 【使用新版mysql驱动的改变】---记忆犹新

    关于 版本的问题: 之前安装数据库的时候  安装的mysql 8.0  脚本文件来自5.7 的数据库 maven版本3.5.3 jdk1.8 tomcat 9 跑maven项目的时候  遇到各种问题 ...

  3. 接口测试 dubbo 接口测试

    dubbo是阿里巴巴开源的一套rpc方案,以为理念很契合微服务,这几年很火,用户里面不凡京东,当当,去哪儿等大公司.rpc场景   dubbo架构   官网也提供了一个很简单实用的demo来演示dub ...

  4. 创建vue 项目

    sudo npm install -g @vue/cli-init vue init webpack my-project cd my-project/ npm install npm run dev

  5. PYTHON 100days学习笔记008-1:数据结构补充

    目录 Day008_01:数据结构补充 1.列表list 1.1 将列表当作堆栈使用 1.2 将列表当作队列使用 1.3 列表推导式 1.4 嵌套列表解析 1.5 del语句 2.元组和序列 3.集合 ...

  6. mysql CPU太高排查办法

    [1]问题描述 首先,查看top,下图来自网络 为什么会有%CPU 375??? 还可以超过100%的? 这是因为,有多核CPU.如图,top后,按数字1,即可出现下图. [2]排查办法(当前CPU爆 ...

  7. awk 打印从某一列到最后一列的内容

    数据内容来源于  linux history的命令输出 awk命令 history|awk -F " " '{for (i=2;i<=NF;i++)printf(" ...

  8. HDU1285(拓扑排序裸题

    ..被多组测试坑了一波 #include<iostream> #include<vector> #include<queue> using namespace st ...

  9. LC 752 Open the Lock

    由于这个问题,涉及了很多知识,例如数据结构里面的哈希表,c++中的迭代器,因此,需要对于每一个疑惑逐一击破. 问题描述 You have a lock in front of you with 4 c ...

  10. MySQL之主键

    一.主键  primary key (唯一标识 .不能重复.不能为空) 1.主键-----是表中的字段,这个字段能唯一标识一条记录.例如 学生表(学号.姓名,年级)里的学号,不能重复.不能为空: 课程 ...