javascript - 如何使点击时的下拉菜单不悬停

Question

我有代码可以让我的菜单在父 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/

Answer 1

稍微调整一下 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');
});