Question

我使用bootstrap 3，我有菜单。我还使用superfish.js作为菜单。它有效，但它显示悬停时的下拉菜单，但我想在点击时显示下拉菜单。

我的HTML：

<div id="navbar-collapse-menu" class="collapse navbar-collapse">
    <ul id="menu-testing-menu" class="nav navbar-nav sf-js-enabled" style="touch-action: pan-y;">
        <li class="menu-item menu-item-has-children dropdown">
            <a class="sf-with-ul" data-toggle="dropdown">Home</a>
            <ul class="dropdown-menu" style="display: none;">
                <li class="menu-item">
                    <a href="#">Lorem Ipdum</a>
                </li>
                <li class="menu-item">
                    <a href="#">Lorem Ipdum</a>
                </li>
                <li class="menu-item">
                    <a href="#">Lorem Ipdum</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

我的js：

$("#menu-testing-menu").superfish({
    delay: 100,
    animation: {
        opacity: 'show',
        height: 'show'
    },
    speed: 'normal',
    cssArrows: false
});

我的css：

li.menu-item.dropdown:hover .dropdown-menu {
    visibility: visible;
}

所以可以在点击时显示下拉菜单吗？

Answer 1

Superfish不提供此选项：它有意在悬停/关闭时打开/关闭菜单。要通过点击打开/显示下拉菜单，您可以：

禁用（stopPropagation）：mouseenter mouseout
show/hide菜单

$("#menu-testing-menu").superfish({
    delay: 100,
    animation: {
        opacity: 'show',
        height: 'show'
    },
    speed: 'normal',
    cssArrows: false
});
$('.sf-with-ul').on('mouseenter mouseout', function(e) {
    e.stopPropagation();
})
$('.sf-with-ul').on('click', function (e) {
    $(".dropdown-menu").toggle(!$(".dropdown-menu").is(':visible'));
})

单击显示Superfish下拉菜单

1 个答案: