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;
}

将下拉菜单从悬停更改为点击

1 个答案: