css - 将 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

当触摸/单击 .dropdown-toggle 元素时，不使用 css :hover 使用 javascript 向 .dropup-content 元素添加和删除 .hover 类。

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