如何使单击时的下拉列表不悬停

How to make the dropdown on click not hover

本文关键字：下拉列表 悬停 何使 单击      更新时间：2023-09-26

我有一段代码，当父li悬停在上面时，它会使我的菜单展开。我想更改它，使其仅在单击时展开。我在CSS中的代码是：

 .nav li:hover li {
    /* Expanding the list elements */
    height: 30px;
    position: relative;
    top: auto;
}

如何仅在单击父对象时实现此操作？

我的HTML:

<ul class="nav">
    <li class="dropdown" id="dropdownparent">
        <a href="#">Categories</a>
        <ul id="dropdown">
            <li id="dropdown"><a href="#">Sublink</a></li>
            <li id="dropdown"><a href="#">Sublink</a></li>
            <li id="dropdown"><a href="#">Sublink</a></li>
            <li id="dropdown"><a href="#">Sublink</a></li>
        </ul>
    </li>
</ul>

这是我用来测试的实时页面。。。http://portal.electrovision.co.uk/dropdown-test/

一个轻微的css调整

.nav li.open li {
    /* Expanding the list elements */
    height: 30px;
    position: relative;
    top: auto;
}

和一些javascript（jQuery）

$('.nav > li.dropdown').on('click', function(e) {
    $(this).toggleClass('open');
});
相关文章：