实现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>
之后需要时加上该属性即可。

最新文章

  1. iphone如何导出微信聊天记录到电脑?
  2. 一、OWIN初探
  3. 在Ubuntu搭建.NET Core环境
  4. VC编译连接选项详解(转)
  5. css边框阴影问题
  6. 前端 - 使用gulp搭建es6运行环境
  7. [转]笔记本Ubuntu系统关闭独显+省电降温设置
  8. 解决 setOnItemClickListener,setOnScrollListener与setOnTouchListener事件冲突问题
  9. 一键部署Kubernetes高可用集群
  10. 白话C#语法新特性之元组
  11. DxPackNet 5.视频高质量的压缩和传输
  12. 菜鸟玩云计算之廿一: saltstack之pillar
  13. chrome主页被篡改为hao123 win10系统
  14. Configuring High Availability and Consistency for Apache Kafka
  15. 五十一、进程间通信——System V IPC 之进程信号量
  16. 架构师成长之路2.3-PXE+Kickstart无人值守大量部署Linux
  17. rabbitmq队列的exclusive,durability,auto-delete属性以及消息可靠传输设计
  18. poj 3268 最短路dijkstra *
  19. javascript 异步操作,串形执行,并行执行
  20. 淘宝API开发第一步

热门文章

  1. REST的含义和RESTful架构入门
  2. 辽宁工程技术大学校园网(深澜) 叠加小水管提速,多wan叠加负载均衡
  3. SSH隧道技术简介
  4. OpenCV的Rect矩形类用法
  5. nginx+django+uwsgi
  6. LightOJ 1258 Making Huge Palindromes (Manacher)
  7. 20169219 实验一 Java开发环境的熟悉(Linux + IDEA)
  8. 关于VBS的一个怪现象
  9. 【SQL】- 基础知识梳理(一) - 数据库
  10. Google Earth 8.0