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 ...
随机推荐
- 《精通并发与Netty》学习笔记(03 - 客户端程序编写)
上节我们编写了netty服务端的程序,这节我们来写客户端程序 第一步:改造服务端程序为: (1)MyServer类: package com.ssy.netty.demo01; import io.n ...
- 【机器学习】ICA 原理以及相关概率论,信息论知识简介
看完了sparse coding,开始看ICA模型,本来ng的教程上面就只有一个简短的介绍,怎奈自己有强迫症,爱钻牛角尖,于是乎就搜索了一些ICA的介绍文章(都是从百度文库中搜来的),看完之后感觉这个 ...
- element UI实现动态生成多级表头
一.效果图 二.封装两个组件,分别为DynamicTable.vue和TableColumn.vue,TableColumn.vue主要是使用递归来对表头进行循环生成 DynamicTable.vue ...
- 前端CSS实现图片自适应背景大小
<body> <div> <!--背景图片--> <div id="web_bg" style="background-imag ...
- THUSC2016
补退选 Luogu LOJ BZOJ 比较裸. 建一棵Trie树,记录一下每个节点的\(sum\)表示经过该点的字符串个数,每次暴力插入.删除. 同时每个节点维护一个vector,记录一下这个点的\( ...
- Elastic Search中mapping的问题
Mapping在ES中是非常重要的一个概念.决定了一个index中的field使用什么数据格式存储,使用什么分词器解析,是否有子字段,是否需要copy to其他字段等.Mapping决定了index中 ...
- 杭电2019多校第一场,Problem I,String 2019
题目描述 Tom has a string containing only lowercase letters. He wants to choose a subsequence of the str ...
- shiro过滤器机制
shiro内置过滤器介绍 https://blog.csdn.net/qq_35608780/article/details/71703197 Shiro的Filter机制详解---源码分析 http ...
- thymeleaf 模板使用 之 解决因HTML标签未闭合引起的错误
一.修改thymeleaf属性配置 spring.thymeleaf.prefix=classpath:/templates/ spring.thymeleaf.suffix=.html spring ...
- stuff拼接字符串
stuff stuff(param1,startIndex,length,param2) 说明:将param1中自startIndex(SQL中都是从1开始,而非0)起,删除length个字符,然后用 ...