// 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. 10 Best Practices for Better RESTful API

    转自 http://www.cnblogs.com/mondol/p/6109024.html

  2. mysql 批量kill locked 进程

    mysql -s -e "show processlist;" | grep 'Sending data' | awk '{print "kill "$1&qu ...

  3. libvirt log系统分析

    1.编译和安装 配置参数需要加上–enable-debug=yes,相关定义在src/util/virlog.h文件中定义 图1-1 ENABLE_DEBUG宏 如果没有加这个编译参数,调用VIR_D ...

  4. FUZZ测试简介

    基本思想:利用黑盒方法,发送大量恶意/随机数据到被测试系统,通过监视系统运行过程中的异常,来发现应用程序中可能存在的安全问题.

  5. 前端web worker实践与总结

    参考链接:https://www.jianshu.com/p/97f6144dfddf

  6. 零零散散的python笔记

    Python strip()方法 用于移除字符串头尾指定的字符(默认为空格或换行符)或字符序列. #!/usr/bin/python # -*- coding: UTF-8 -*- str = &qu ...

  7. 怎样解决SQL Server内存不断增加问题

    原文:怎样解决SQL Server内存不断增加问题 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn. ...

  8. 后缀数组 LCP--模板题

    题意: 给你S串和T串,用T串的所有前缀去匹配S串(匹配值是最长公共子串). 问你总值相加是多少. 思路: 先把两个S,T串倒过来,再拼接 S#T 合成一串,跑一下后缀数组 在排序好的rank里计算每 ...

  9. G.Colorful String(The Preliminary Contest for ICPC Asia Xuzhou 2019)

    https://nanti.jisuanke.com/t/4 #include <bits/stdc++.h> using namespace std; ,; typedef unsign ...

  10. javascript——定义函数方式

    1:有名函数定义方式 2:匿名函数定义方法 https://www.cnblogs.com/wl0000-03/p/6050108.html console.log(add(3,6)); (funct ...