实现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. Redis搭建(四):Sharding集群模式

    一. 方案 1. 介绍redis集群分为服务端集群(Cluster)和客户端分片(Sharding)服务端集群:redis3.0以上版本实现,使用哈希槽,计算key的CRC16结果再模16834.此处 ...

  2. codeforce468DIV2——E. Game with String

    题目 Vasya and Kolya play a game with a string, using the following rules. Initially, Kolya creates a ...

  3. Gym - 101128C:Canvas Painting

    这个就是哈夫曼树哇~ 我们仨英语太差了,跟榜时候才看出来是哈夫曼树雾 一个优先队列就可以搞定 #include <cstdio> #include <algorithm> #i ...

  4. HTTP状态详解

    1**:请求收到,继续处理2**:操作成功收到,分析.接受3**:完成此请求必须进一步处理4**:请求包含一个错误语法或不能完成5**:服务器执行一个完全有效请求失败 100——客户必须继续发出请求1 ...

  5. hook NtQueryDirectoryFile实现文件隐藏

    一.NtQueryDirectoryFile函数功能(NT系列函数) NtQueryDirectoryFile函数:在一个给定的文件句柄,该函数返回该文件句柄指定目录下的不同文件的各种信息. 根据传入 ...

  6. 利用arcgis实现经纬度和平面坐标互转

    一平面直角坐标(投影坐标)转经纬度 基本程序是这样的 经纬度计算操作 1. 定义坐标系:在AreToolbox下→数据管理工具→投影和变换→定义投影→输入数据或要素点击▼选择定义同层(同时在坐标系中点 ...

  7. 基于.Net平台常用的组件和框架整理

    转载自:http://www.cnblogs.com/hgmyz/p/5313983.html 基于转载进行补充 RPC框架: RPC:远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而 ...

  8. SQL Server 时间类型转换函数

    cast ( expression as data_type(length))convert ( data_type (length), expression, style) //如果未指定 leng ...

  9. WordCountPro

    github项目地址:https://github.com/Hoyifei/SQ-T-Homework-WordCount-Advanced PSP表格   PSP2.1 PSP阶段 预估耗时 (分钟 ...

  10. css总结15:CSS3 圆角

    1 css圆角: 1.1 浏览器支持:-webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本. 1.2 属性 border-radius: 代码如下: #rcorners1 { bor ...