禁止dropdown单击后消失

最新推荐文章于 2024-07-30 09:02:39 发布

原创最新推荐文章于 2024-07-30 09:02:39 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种在HTML中使用JavaScript阻止下拉菜单点击事件穿透到其父元素的方法，通过监听特定类名的点击事件并调用stopPropagation()函数来实现。

HTML 代码

        <div class="col-md-1">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <i class="fa fa-gears"></i>
                @*<span class="label label-warning">10</span>*@
            </a>
            <div class="dropdown-menu bg-black" data-stopPropagation="true" >
                <div class="treeview" style="width:300px">
                 
                        <span style="color:white">BU</span>
                        <select id="selectBU" style="color:black" onchange="GetEquipmentLine()" data-stopPropagation="true">
                            <option value="1">BU1</option>
                            <option value="6" selected="selected">BU6</option>
                        </select>
                        <span style="color:white">Line</span>
                        <select id="selectEquipmentLine" style="color:black">
                            <option></option>
                        </select>
                        <button class="btn btn-primary btn-xs" onclick="GetKanBanData()" id="btnGetEquipment">refresh</button>
                </div>
            </div>

 
        </div>

我试了data-stopPropagation="true" 没有起作用，只好用下面的方法实现

    $(".treeview").on("click", function (e) {
        e.stopPropagation();
    })