首页 > 经验 > 关键词 > Bootstrap3.0学习最新资讯 > 正文

Bootstrap3.0学习教程十八:JavaScript插件下拉菜单

2015-04-10 09:47 · 稿源:aehyok博客园
文章目录

完整教学可查看:Bootstrap3.0教程

本文主要来学习一下JavaScript插件--下拉菜单。

下拉菜单

通过此插件可以为几乎所有东西添加下拉菜单,包括导航条、标签页、胶囊式按钮,本文主要来介绍下导航条里面的下拉菜单吧,其实道理都是一样的。

用于导航条

先来看一下之前做过的一个简单的导航条

导航条分为四个部分。第一部分导航头,第二部分导航列,第三部分form查询表单,第四部分导航列。

 <nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myCollapse">
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="myCollapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>

用法一--通过data属性

通过向链接或按钮添加data-toggle="dropdown"可以打开或关闭下拉菜单。

      <li class="dropdown"> 
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>

即上面的那个小例子就是如此。

用法二--通过JavaScript

通过JavaScript打开或关闭下拉菜单:

通过将data-toggle属性值设置为空,或者直接删除data-toggle属性,那么再次点击就不会出现下来菜单了,接下来我们通过给这个a标签添加一个onclick事件。

<a href="#" class="dropdown-toggle" id="myDropDown" data-toggle="" onClick="Test()">Dropdown <b class="caret"></b></a>

并添加相应的JavaScript的函数代码

  • <script type="text/javascript"> function Test()
  •   {
  •      $('#myDropDown').dropdown();
  •   }
  • </script>

就这样保存,然后F5刷新页面重新点击,就可以看到下拉菜单了(不过这里不太清楚为什么要点击两次下拉菜单才会出来)。

事件

可以绑定事件,然后在元素进行相应处理的时候会自动绑定到元素,并进行执行相关的代码。

  • $('#myDropdown').on('show.bs.dropdown', function () { // 在显示的时候做一些处理代码 })

总结

看似很简单的东西,有时候实践起来还是有难度的,多实践肯定不会错。

网友热搜:

  • 相关推荐
  • 大家在看
  • 联发科独立AI处理器APU3.0,手机AI应用的原动力

    近年来,手机在语音助手、AI拍照、视频优化、VR/AR游戏等方面的AI应用快速发展,手机想要实现这些AI应用,需要芯片提供足够强大的AI算力和低功耗效能,因此手机芯片厂商纷纷在SoC中加入了独立的人工智能处理器,用于专门进行AI运算。例如联发科的天玑系列5G芯片,无论是主打高端市场的天玑 1000 系列,还是主打中高端市场的天玑 800 系列,都搭载了联发科自研的独立AI处理器 APU 3.0。早在 2018 年,联发科就开始将独立AI处理器内?

  • StrategyAnalytics:超宽带芯片正在迈向成功

    Strategy Analytics最新发布的研究报告《UWB的回归:智能手机、汽车、工业等芯片预测》指出,2019年UWB(超宽带)系统和无线电芯片市场实现了飞跃;于此同时,新标准、芯片和应用意味着UWB的复兴。相关资料显示,UWB 技术是一种传输速率高,发射功率较低,穿透能力较强并且是基于极窄脉冲的无线技术。 StrategyAnalytics指出,苹果iPhone11机型采用了全新的U1超宽带无线电芯片以及用于远程无钥匙进入的新汽车标准推动?

  • 更轻盈,更安全,宏碁TravelMate X5高效办公

    在市面上众多类型的笔记本中,轻薄本其轻薄的特征受到职场人士的青睐,对于现代企业办公方式与工作场景多样化的情形下,易于携带的轻薄本则成为都市白领们的必备武器。突破新极限,宏碁TravelMate X5 轻薄本拥有超越想象的轻薄,整机仅重0.98kg,薄至14.9mm,轻松收纳,更拥有强劲的性能与安全的工作环境为高效办公护航。 轻薄体验,搭载酷睿处理器性能非凡 TravelMate X5 不仅仅只是轻薄,整机重量控制在0.98kg的同时,更搭载了?

  • 直播3.0时代:综艺+带货+内容如何“赢过”买买买

    用户对不同品类商品的关注点不同,带货方式也有所不同。比如罗永浩带货网红食品钟薛高跟薇娅带货卫星,梁建章带货酒店与董明珠带货家电,都会有所不同。随着直播赛道越来越拥挤,各个细分品类的直播开始呈现出不同的行业规律。

  • 鲸小喜3.0:实体店如何用会员制提高业绩?

    最近几年,会员制的发展速度可以用惊人来形容,很多大公司,都开始疯狂推会员制。2015 年,京东推出PLUS会员; 2016 年,唯品会推出超级VIP会员; 2017 年,网易考拉推出黑卡会员、苏宁易购推出SUPER会员; 2018 年,阿里推出 88 超级会员。 以上是一些互联网公司,我们再来看一看线下实体商家。 2015 年物美推出会员制超市尚佳会员店、永辉也在上海开出超市会员店; 2017 年,银泰推出付费会员365; 2019 年,中国首家Costco开市客落址

  • 三星Galaxy Note 20 Ultra爆料:一亿像素主摄敲定

    6月26日消息,知名爆料人士Roland Quandt推特表示,已经有确凿证据表明三星Galaxy Note 20 Ultra的主摄为108MP。除了一亿像素主摄之外,Galaxy Note 20 Ultra还有可能会使用潜望式长焦镜头及超

  • 三星Galaxy S20 Ultra从15楼摔下:屏幕基本完好

    6月13日消息,有网友表示,自己的Galaxy S20 Ultra从15楼摔到3楼,背板摔坏了,但是屏幕基本完好,仅有一个坏点。据悉,Galaxy S20 Ultra是三星2月份推出的年度旗舰,首发起售价9999元,它采用

  • 鲸小喜3.0:实体店开始复苏了,来研究一下新会员联盟--鲸鲤店

    2020 年的实体店市场可谓是如履薄冰,全国在今年倒闭的零售店不计其数。但我觉得实体店会慢慢复苏,因为电商的发展也遇到了瓶颈。近几年电商红利逐渐消失,营业费用也在不断提高,商家抱怨平台收费太高,电商法出台对网购雪上加霜,导致大批平台经营者纷纷退出投身实体店。然而如何克服传统实体店弊端,依旧是众多实体店主必须面临的思考。很多实体店商家面临着拓客,锁客,留客三大问题。在做活动的过程中,无法长期锁定客户,而?

  • 鲸小喜3.0:零售业会员制到底该怎么玩?

    会员制是帮助企业建立忠诚顾客群体的重要工具。据统计,如果一家企业至少有70%的顾客消费是由会员或回头客带来的,那么其营销活动的投入会降低很多。但绝大部分零售商并没有真正树立“既卖商品,又提供服务”的用户意识,他们仅仅是想把商品卖出去,从顾客口袋里拿到更多的钱。这样的思路下,零售业的会员制是很难做好的。通过数月的调研,我们总结出本土化会员制存在的三大问题。1. 大众普遍不适应商场会员准入制从国外引入的会员

  • Dafex 达菲创新小宇宙 AIT 3.0 引领金融科技

    随着大时代的改变与发展迁移,人工智能、大数据、云计算等新一代信息技术的发展已经成为了改变传统一尘不变的模式。DAFEX 达菲是一家全球性的专业金融技术服务提供商,用心致力于创新科技为一直保守着传统方式的金融业带来新景象。一个汇集顶尖人工智能技术及金融交易的专业平台 – 小菲达人(AIT 3.0)正是DAFEX 达菲的核心所在。小菲达人(AIT 3.0)不仅汇聚了业内专家和各大技术支持,更以区块链技术为研发领航者创建了许多人工

  • 腾讯智慧出行发布多款重磅新品 涉及车联网产品TAI 3.0等

    【TechWeb】6月24日消息,腾讯智慧出行今日发布多款新品,包括生态车联网产品TAI 3.0、全新一代自动驾驶虚拟仿真平台TAD Sim 2.0,以及汽车云数字营销解决方案、智慧交通解决方案。生态车联网产品TAI 3.0作为生态车联网战略的核心承载之一,TAI3.0在年初CES上首发亮相,此次全新发布的TAI3.0已经进化具备四大核心服务能力,即“认识和理解用户、与用户的连接和沟通、为用户连接广泛的服务生态、贯穿全生命周期的云端处理”能力。?

  • 学习通崩了?6月17日学习通app疑似无法打开

    6月17日,在今天有不少网友表示学习通App出现无法开打,页面刷新不出来等多种问题,疑似该app崩了。而在今年3月份学习通也曾发生过app故障,当时官方表示因为上千万用户同时使用,造成瞬间流量过载,导致部分功能不流畅,学习通通过“起飞”模式,使用户分批次登陆,最大限度保障用户的使用。

  • 人人App疑遭全网下架 人人App为什么被下架

    近日苹果AppStore应用商店上已经无法搜索到人人APP,疑似已经被下架,而在多个安卓应用渠道同样也无法搜索和下载,提示为“该应用内部优化中,暂不提供下载”。那么人人APP为什么被下架,官方对此如何回应呢。

  • 腾讯游戏扩大人脸识别范围,未成年人保护进入3.0阶段

    6月17日,腾讯游戏宣布自 6 月 17 日起腾讯游戏正式升级未成年人保护措施,扩大人脸识别技术应用范围,对疑似未成年人的用户进行甄别。这也意味着腾讯游戏对未成年人保护工作升级到了全新的3. 0 阶段。

  • 超大杯!三星Galaxy Note 20 Ultra保护壳曝光:相机模块大的惊人

    6月21日,据外媒报道,网上已经流传出了关于三星Galaxy Note 20和Note 20 Plus/Ultra的手机保护套,从照片可以看出来,相机似乎得到了升级,因为相机模块十分大。从图片可以这几款机型的差别,

  • 坚果Pro 2S/R1 Smartisan OS一步3.0功能跳票:官方致歉

    6月24日消息,Smartisan OS官方微博发布“关于R1和Pro 2S机型一步3.0功能延期的情况说明”。官方表示,原计划坚果R1、Pro 2S在2020年年初完成Smartisan OS 7.0升级,包括网友非常期

  • Strategy Analytics:2G和3G用户占全球移动用户总数的46%

    6月19日消息,Strategy Analytics基于其免费报告《低成本4G手机:市场动态和机遇》,并结合最新的产业发展情况,分析了当前2G/3G的退网趋势和4G用户迁移机会。Strategy Analytics最新的无线市场预测,今年初,2G和3G用户占全球移动用户总数的46%,但贡献的收入却只占全球移动总收入的27%。到2023年,这一收入占比将下降到10%。非洲可以认为是一个特例,在这个地区,各国的ARPU值低于2美元,因此通过补贴促进用户迁移可

    2G 3G 4G
  • 有味APP

    有味APP,前身为腾讯新闻极速版,产品定位是“美好生活分享平台”。产品分为首页、圈子、关注和小窝(即个人主页)四大部分,用户可在产品内发布图文内容或视频内容。

  • AppClips是什么功能 AppClips怎么使用

    苹果iOS14系统中加入了一个全新的AppClips功能,这个功能是可以让用户不下载全部应用的情况下就可以使用该应用的功能,那么AppClips是怎么使用,这里我们来了解下AppClips功能的介绍。

  • 东方福利网全新上线百福得3.0企业员工福利管理系统

    5月28日,这场在特殊时期承载着不同以往的期待,受到各方高度关注的十三届全国人大三次会议正式闭幕。在两会的诸多声音中,“新基建”和“打造数字经济新优势”一度成为社会热词。新冠疫情的爆发使得传统经济被迫按下暂停键,新基建的提出则进一步加快了企业数字化转型升级的步伐。各行各业将趁此东风,通过数字技术赋能企业商业模式、管理运营。随之而来的,是协同办公、数字营销等新兴需求的爆发和SaaS应用需求激增的趋势。近日?

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议

热文

  • 3 天
  • 7天