Question

我正在处理垂直dropdwon菜单，我想在用户点击父链接时关闭子菜单。

到目前为止，我有这个：

<ul class="nav flex-column" id="adminMenu">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" data-offset="0">Dropdown</a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Separated link</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">Action2</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Separated link</a>
                        </div>
                    </li>

使用Javascript：

$(".dropdown").on({
    "shown.bs.dropdown": function() {
        this.closable = false;
    },
    click: function(t) {
        this.closable = true;
    },
    "hide.bs.dropdown": function(e) {
        if (this.closable === false) {
            return false;
        }
    }
})

但是当我点击同一个链接时它不会关闭。即使我点击同一个链接，this.closable仍然是假的。我正在使用bootstrap 4.0.0

除非用户再次点击父级，否则我希望保持打开的子菜单。

Jsfiddle

Bootstrap 4下拉菜单关闭同一链接点击

0 个答案: