Question

我使用bootstrap制作了这个下拉菜单。问题是，当我点击它里面或检查里面的复选框时它隐藏起来。除非在下拉菜单之外的某处点击，否则如何让它不要关闭。提前谢谢！

<div class="ibox-tools">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="true">
        <i class="fa fa-line-chart"></i>
    </a>

    <ul class="dropdown-menu dropdown-user" style="width:200px">
        @foreach(PKG_VLTROUTINE_GET_EXCHAGEINFO_Result cur in Model)
        {
            <li style="padding:5px">
                <strong>@cur.VLTNAME</strong>
                &nbsp;@cur.RATE
                <br />
                <small>@cur.VLTFULLNAME</small>
                <small>
                    (
                    @cur.RATEDIF
                    @if (cur.DIRECTION == 1)
                    {
                        <i style="color:#1ab394" class="fa fa-level-up text-navy"></i>
                    }
                    else
                    {
                        <i style="color:#ed5565" class="fa fa-level-down text-navy"></i>
                    }
                    )
                </small>
                <div class="MsSwitch MsSwitch-update">
                    <input data-evoldvall="-1" value="-1" type="checkbox" checked="" data-valtrue="-1" data-valfalse="" name="@cur.VLTNAME" class="evCheckBox">
                    <label for="@cur.VLTNAME"></label>
                </div>
                <li class="divider" style="margin:0px"></li>
            </li>
        }
    </ul>

Answer 1

删除数据属性data-toggle =“dropdown”并实现下拉列表的打开/关闭可以完成这项工作。首先处理链接上的点击以打开/关闭下拉列表，如下所示：

$('a.dropdown').on('click', function () {
 $(this).parent().toggleClass('open'); 
});

然后等待下拉列表外的点击将其关闭，如下所示：

$('body').on('click', function (e) {
 if (!$('a.dropdown').is(e.target) && $('a.dropdown').has(e.target).length === 0 && $('.open').has(e.target).length === 0 ) { 
$('a.dropdown').parent().removeClass('open'); } });

在其中单击时不要隐藏下拉列表

1 个答案: