`

bootstrap

 
阅读更多

直接上我遇到的问题吧:

在这个“下拉菜单”中有一个登录表单需要填写但是dropdown的默认效果是在这个“菜单”中有点击就会自动给关闭掉--

扒拉了半天手册,似乎没有看见有参数可以控制这个关闭的动作。。
发现已经有前辈提供了解决方案了。。好吧,那我这里就不客气了O(∩_∩)O~
首先,向页面js中添加以下内容

$("ul.dropdown-menu").on("click","[data-stopPropagation]",function(e){
    e.stopPropagation();});

这么做的目的是咱定义了一个叫“data-stopPropagation”的属性,让它被点击的时候停止掉dropdown想自我了结的念头╮(╯▽╰)╭

嗯,事情到这里就好办了
我的表单需要点击,我的登录按钮需要点击
那么,我在这些标签里添加上刚刚定义的属性“data-stopPropagation”就可以了
eg:

<ahref="http://www.skidu.me/"javascript:void(0)" id="log-btn" data-stopPropagation="true" class="dropdown-toggle" data-toggle="dropdown">
    登录
</a><ulclass="dropdown-menu login-cpanel"data-stopPropagation="true"><li><labelfor="login-email"data-stopPropagation="true">
            Email:
        </label><inputtype="text"name="email"id="login-email"data-stopPropagation="true"/></li><li><labelfor="login-pwd"data-stopPropagation="true">
            密码:
        </label><inputtype="password"name="passowrd"id="login-pwd"data-stopPropagation="true"/></li><li><labelclass="clearfix"data-stopPropagation="true"><inputtype="checkbox"name="remember"value="1"data-stopPropagation="true"/><emdata-stopPropagation="true">
            一个月内自动登录
        </em></label></li><liclass="divider"></li><li><aclass="btn btn-primary"data-stopPropagation="true">
            登录
        </a></li></ul>

今天的唠叨完毕,enjoy~~

 

分享到:
评论

相关推荐

    bootstrap bootstrap-3.3.7

    这个里面 包含整个bootstrap源程序 你所需要的都在了、里面.Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 本教程将向您...

    Bootstrap 图标库下载

    Bootstrap Icons:Bootstrap 有史以来第一次拥有自己的图标库,并且是专门为 Bootstrap 的组件和文档定制开发的。 Bootstrap Icons 的设计初衷是与 Bootstrap 组件配合使用,从表单到导航组件等。Bootstrap Icons ...

    bootstrap-4.5.0.zip

    Bootstrap (Web框架 可用) Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的...

    Bootstrap期末课程设计

    资源名称:Bootstrap期末课程设计 内容使用语言:HTML5+css3+js+bootstrap框架 使用/学习场景:完成整个学期成果,了解框架的好处 应用场景:对于使用框架对于完成一个网页的实现更加容易 特点:加深对前端语言的...

    bootstrap-table后端分页功能完整实例

    本文实例讲述了bootstrap-table后端分页功能。分享给大家供大家参考,具体如下: 使用bootstrap-table实现后台分页 插件资源点击此处本站下载。 引用以下css &lt;link rel="stylesheet" href="../plugins/...

    bootstrap-editable.zip

    可编辑bootstrap-table及相关组件:bootstrap3、bootstrap-table相关、bootstrap-table-editable.js、bootstrap-editable.js、bootstrap-editable.css; 配合起来,可以实现可编辑bootstrap-table列表。代码实现: ...

    bootstrap实现登录页面

    实现静态的登录页面,借助于bootstrap框架。Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。 ...

    Bootstrap.By.Example.1785288

    Master Bootstrap 4's frontend framework and build your websites faster than ever before About This Book Become an expert in Bootstrap framework, and speed up front-end development and prototyping ...

    Bootstrap HTML5 Responsive Templates (Bootstrap模版24种)

    (Bootstrap模版24种) Agency.zip andia-agency.zip bolt.zip bootbusiness.zip brushed.zip business-casual.zip codester-free-responsive-bootstrap-template.zip essentia.zip flatty.zip flat_theme.zip ...

    Bootstrap5 图标库 bootstrap-icons

    Bootstrap5 图标库 bootstrap-icons

    bootstrap-table 分页Demo

    bootstrap-table后端分页的参数设置Demo。 bootstrap-table是一款非常有名的开源表格插件,在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置,可以实现查询、分页、排序、复选框、设置显示列、...

    全面解析多种Bootstrap图片轮播效果

    分享了三种Bootstrap图片轮播效果,相信总有一款你满意的! 第一种效果:Bootstrap简单轮播 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Bootstrap 实例 - 简单的轮播(Carousel)插件&lt;/title...

    swagger-bootstrap-ui-1.9.6-API文档-中文版.zip

    赠送jar包:swagger-bootstrap-ui-1.9.6.jar; 赠送原API文档:swagger-bootstrap-ui-1.9.6-javadoc.jar; 赠送源代码:swagger-bootstrap-ui-1.9.6-sources.jar; 赠送Maven依赖信息文件:swagger-bootstrap-ui-...

    基于bootstrap-table 实现 右侧列固定

    基于bootstrap-table 实现 右侧列固定,也可以针对左侧列固定,针对操作列使用起来非常方便,引用jquery、bootstrap-table-fixed 样式和js文件后,可以随意设置,灵活。 fixedColumns: true,//fixedtNumber:2, //...

    Bootstrap 3 综合实战项目教程,Web前端响应式开发项目实战视频教程带源码资源

    Bootstrap 3 综合实战项目教程,Web前端响应式开发项目实战视频教程带源码资源Bootstrap 3 综合实战项目教程,Web前端响应式开发项目实战视频教程带源码资源Bootstrap 3 综合实战项目教程,Web前端响应式开发项目...

    两套bootstrap5框架后台管理模板 - Amdash

    Amdash是基于Bootstrap5框架实现的后台管理模板。它有多个仪表盘样式,工作在所有主要浏览器、桌面和所有智能手机设备上。非常易于定制和开发人员友好的HTML5模板。集合与最新jQuery UI组件和bootstrap插件。它可以...

    bootstrapValidator.js验证在bootstrap4.0使用

    1.bootstrap使用4.0 2.customValidator.css Bootstrap v4.0.0-beta (https://getbootstrap.com) jQuery v3.2.1

    开发工具 dataTables.bootstrap.min

    开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min...

    Bootstrap Table 搜索框和查询功能

    知识点bootstrapTable 刷新和查询配置 2.提升js代码性能 1.减少全局变量声明 2.缓存dom节点查找结果 3.局部变量缓存全局变量  /** * @param col bootstrapTable列表生成配置对象 */ var searchValue ={};//查询...

Global site tag (gtag.js) - Google Analytics