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 ...
随机推荐
- koa2数据请求相关问题解决方案汇总
前端请求后端数据,难免会遇到如下几个问题: 1⃣️跨域 2⃣️post/get,其中post请求的方式又分为多种 3⃣️后端数据返回格式(上一篇已经有讨论过,这里不再赘述) 用koa2的话,如何解决这 ...
- SecurityLibrary
using System; using System.IO; using System.Linq; using System.Security.Cryptography; using System.T ...
- git学习教程二之远程仓库学习
首先你需要注册一个github用户名,我的github账户是:1654218052@qq.com 由于本地的git仓库和github的仓库是通过SSH加密的,所以我们还需要设置一点东西哦 第1步:创建 ...
- IDEA 2019中一些有偏好设置
1.取消启动时自动进入上一次工程: 路径:Setting ——> Appearance & Behavior ——> System Setting 取消勾选Reopen last ...
- C#作业系统提示和故障排除
使用Unity C#作业系统时,请确保遵守以下内容: 不要从作业访问静态数据 从作业访问静态数据会绕过所有安全系统.如果您访问错误的数据,您可能会以意想不到的方式崩溃Unity.例如,访问MonoBe ...
- pagefile.sys 虚拟内存
当我们使用电脑的时候,有时候需要更多的内存空间,但是内存条的价格又比较昂贵,我们可以用虚拟内存的方法,把一部分硬盘的空间作为内存使用. 进入控制面板---高级系统设置----高级-----更改---- ...
- centos7修复grub2
GRUB :“the Grand Unified Bootloader ”引导加载程序 1.主要配置文件 #/boot/grub2/grub.cfg #rm -rf /boot/grub2/grub ...
- 【转帖】linux sort,uniq,cut,wc,tr,xargs命令详解
linux sort,uniq,cut,wc,tr,xargs命令详解 http://embeddedlinux.org.cn/emb-linux/entry-level/201607/21-5550 ...
- 20190507-学习dubbo有感于梁飞
“作为一名程序员,BAT肯定是大多数人都想进的,仿佛是一种情愫,就像学生时代的我们对清华北大的向往感觉一样.Dubbo团队中,其中主要负责人就是梁飞了,梁飞的经历还是蛮励志的.梁飞,花名虚极, 200 ...
- Spring4学习回顾之路08- FactoryBean配置Bean
建立Student.java package com.lql.srping04; /** * @author: lql * @date: 2019.10.28 * Description: */ pu ...