实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法

问题描述,在下拉菜单中,添加其他元素,例如,原文作者所述的<a>和我自己实际用到的<input>,如果不加处理的话,那么在点击需要操作的元素的时候,由于事件传播的原因将会出现下拉菜单也隐藏掉的情况。

解决方法

1

$('.dropdown-menu a.removefromcart').click(function(e) {
    e.stopPropagation();
});
指定要操作的元素的click事件停止传播

2

$(function() {
    $("ul.dropdown-menu").on("click", "[data-stopPropagation]", function(e) {
        e.stopPropagation();
    });
});
定义属性值data-stopPropagation的元素点击时停止传播事件
<ul class="dropdown-menu">
    <li>
        <-- Do not close when clicking this link -->
        <a href="#" data-stopPropagation="true">
            ...
        </a>
    </li>
    <li>
        <-- Do not close when clicking this checkbox -->
        <input type="checkbox" data-stopPropagation="true" ... >
    </li>

<-- Do not close when clicking anything in this LI -->
    <li data-stopPropagation="true">
        ...
    </li>
</ul>
之后需要时加上该属性即可。

实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法 (转)的更多相关文章

  1. Bootstrap <基础十二>下拉菜单(Dropdowns)

    Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 ...

  2. Bootstrap历练实例:下拉菜单插件方法的使用

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. Bootstrap 字体图标、下拉菜单、按钮组

    Bootstrap 字体图标(Glyphicons) 需要引入fonts文件夹中的文件,而且该文件夹必须命名为fonts,然后引进css文件,jQuery文件,以及bootstrap的js文件. 用法 ...

  4. BootStrap学习(2)_下拉菜单&按钮组

    一.下拉菜单 1.基本下拉菜单 如需使用下列菜单,只需要在class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <ht ...

  5. 简单叨叨bootstrap按钮无限层级下拉菜单的实现

    0.写在前面的话 最近看书都懈怠了,又正值新项目,虽说并不是忙得不可开交,好吧我老实交待,我就是偷懒了其实,博客也没更.言归正传,对于前端的不熟悉现在确实是个让我头疼的事情,以至于一些功能要在网络上漫 ...

  6. Bootstrap单按钮的下拉菜单

    简介 把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了. 插件依赖 按钮式下拉菜单依赖下拉菜单插件 ,因此需要将此插件包含在你所使用的 Bootst ...

  7. Bootstrap中的各种下拉菜单

    @*基本下拉菜单与按钮下拉菜单的样式完全一致.不过,基本的下拉菜单使用<div class="dropdown">包裹,所有要换行.而按钮式下拉菜单<div cl ...

  8. bootstrap和JS实现下拉菜单

    // bootstrap下拉菜单 <div class="btn-group"> <button id="button_text" type= ...

  9. Bootstrap系列 -- 34. 按钮下拉菜单

    按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的.不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果.简单点说就是点击一个按钮,会显示隐藏的下拉菜单.按钮下拉菜单其实就是普 ...

随机推荐

  1. CentOs登陆输入root作为用户名

  2. windows上输入其他国家语言

    1.安装语言环境 2.先有语言环境再有该语言下的输入法toolkit工具集. 3.通过特定语言的属性可以查看键盘布局.

  3. SpringBoot17 FastJson配置、Druid配置

    1 FastJson配置 1.1 FastJson基础知识 点击前往 1.2 SpringBoot整合FastJson 点击前往 1.2.1 导入FastJson依赖 <!--fastjson- ...

  4. 模板模式和Comparable类

    模板模式中,父类规定好了一些算法的流程,并且空出一些步骤(方法)留给子类填充 Java的数组类中静态方法sort()就是一个模板,它空出了一个compareTo的方法,留给子类填充,用来规定什么是大于 ...

  5. Flask框架 之 wtforms

    简介 WTForms是一个支持多个web框架的form组件,主要用于对用户请求数据进行验证. 作用 生成HTML标签 form表单验证 使用 - 用户登录示例- 用户注册示例- 数据库获取数据实时更新 ...

  6. Java 可变字符串StringBuilder/StringBuffer的区别

    public class StringBuilder_and_StringBuffer { private static long SystemTime(){ return System.curren ...

  7. wgs84坐标系与gcj02坐标系转换误差分布图 | Mapping the Error in Transformation between WGS84 and GCJ02 Coordinations

    国际上通用的是wgs84坐标系,而我国对于境内的坐标进行了加密,采用了gcj02坐标系,或者称为火星坐标系.亢孟军老师带的一门课<多媒体电子地图设计>要求我们从wgs84坐标系转换为gcj ...

  8. HTML5 Canvas核心技术图形动画与游戏开发 ((美)David Geary) 中文PDF扫描版​

    <html5 canvas核心技术:图形.动画与游戏开发>是html5 canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典.amazon五星级超级 ...

  9. RobotFramework添加自定义关键字实战

    背景: 此篇文章是上一篇博客python的requests库怎么发送带cookies的请求的后续,上一篇只是使用python脚本调试通过了,接下来要把我们的方法封装为关键字,在RF中调用. 实施: 一 ...

  10. window.document 对象

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...