// 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. 新股定价谁说了算?一文读懂中国IPO询价制度

    总体来说,在市场化条件下,确定股票首次公开发行的价格可以分为两个步骤:一是股票估值:选择一定的股票估值模型,对拟发行股票的公司进行估值,并初步确定发行价格和询价区间:二是发现股票市场价格,主要方式是I ...

  2. Java集合(7):散列与散列码

    散列的价值在于速度.我们使用数组来保存键的信息,这个信息并不是键本身,而是通过键对象生成一个数字(散列码),作为数组下标.由于数组的容量是固定的,而散列容器的大小是可变的,所以不同的键可以产生相同的数 ...

  3. 【AMAD】django-social-auth -- 让django使用社交网络oauth鉴权变得极为轻松!

    简介 个人评分 简介 django-social-auth1集成的Oauth API包括: Google OpenID Google Oauth Google Oauth2 Yahoo OpenID ...

  4. JMeter—压力测试&性能测试工具

    安装 下载 官方网站下载最新版本: http://jmeter.apache.org/download_jmeter.cgi,使用JMeter依赖jdk,建议安装jdk 1.6版本以上. 环境变量配置 ...

  5. layui 时间选择器 不要秒的选项

    通过修改 CSS 样式可以隐藏秒的选项 ++ .laydate-time-list{padding-bottom:0;overflow:hidden} .laydate-time-list>li ...

  6. SpringBoot中使用aop-测试

    面向切面编程(AOP),该种方式主要是为了弥补面向对象编程(OOP)的不足,通过配置切面以及关注点.通知等我们可以在程序的任意位置对我们的代码进行增强(执行一些代码),AOP是Spring的特性之一, ...

  7. 阅读《C Primer Plus》收获

    190927 知识内容: 1.了解到C语言混乱代码大赛.评选谁的程序最有创意但又让人难以理解 2.了解最初的c语言的规则,所有编译器依照规则而设计. 3.编程前先要确定好目标对象,并且在纸上大概写出流 ...

  8. Compress and decompress string

    You are given a string with lower case letters only. Compress it by putting the count of the letter ...

  9. check_mysql.sh

    #!/bin/bash# -------------------------------------------------------------------------------# FileNa ...

  10. JSP与Servlet之间的交互,传值

    一.Servlet 首先要明白一点,servlet需要容器的支持才能够运行,如Tomcat.jetty 达到servlet的请求,需要ServletRequest对象和ServletResponse对 ...