将 DropUp 菜单从悬停更改为单击

Question

我的移动页脚上有一个下拉按钮，但该下拉按钮仅在悬停时打开。

如何更改下拉菜单仅在单击时可见的代码？

            <li class="dropup">
                <a href="#" class="dropdown-toggle" type="button" data-toggle="dropdown"><span class="menu-icon fas fa-bars"></span>More</a>
                    <ul class="dropup-content" style="right: 10px;bottom: 70px">
                        <li><a href="#">{lang:"core","usermenu_favorites"}</a></li>
                        <li><a href="#">{lang:"core","usermenu_visitors"}</a></li>
                    </ul>
            </li>

和 CSS:

    .dropup {
    position: relative;
    display: inline-block;
    }

    .dropup-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    bottom: 50px;
    z-index: 1;
    }

    .dropup-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    }

    .dropup-content a:hover {background-color: #ccc}

    .dropup:hover .dropup-content {
    display: block;
    }

    .dropup:hover .dropbtn {
    background-color: #2980B9;
    }

Answer 1

而不是使用 css :hover 使用 javascript 添加和删除 .hover class 当 .dropdown-toggle 元素为 touched/clicked.

.dropup-content {
    display: none;
    /* position: absolute; */
    background-color: #f1f1f1;
    min-width: 160px;
    bottom: 50px;
    z-index: 1;
}
.dropup-content.hover {
    display: block;
}

将 DropUp 菜单从悬停更改为单击

Change DropUp Menu From Hover to Click

css

twitter-bootstrap-3