zoukankan      html  css  js  c++  java
  • 实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法 (转)

     

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

  • 相关阅读:
    置换及Polya定理
    题解 UVa10943
    Error applying site theme: A theme with the name "Jet 1011" and version already exists on the server.
    用shtml来include网页文件
    SQL 2005 附加数据库出错"解决方法
    SVN 配置 入门教程
    Oracle .Net Develoer
    JdbcTemplate完全学习
    SVD外积展开式
    初识 Nslookup 命令
  • 原文地址:https://www.cnblogs.com/kunlunmountain/p/5706855.html
Copyright © 2011-2022 走看看