2

I use bootstrap 3 and I have menu. Also I use superfish.js for menu. It works but it shows dropdown menu on hover, but I want to show dropdown menu on click.

My 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>

My js:

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

My css:

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

So is it possible to show dropdown menu on click?

isherwood
  • 58,414
  • 16
  • 114
  • 157
name name2
  • 123
  • 4
  • 10
  • Possible duplicate of [Superfish jQuery Menu, open on click rather than hover](https://stackoverflow.com/questions/7312414/superfish-jquery-menu-open-on-click-rather-than-hover) – isherwood May 25 '17 at 16:27
  • This isn't a Bootstrap question. Superfish doesn't have an event option, so you'd have to hack it up. – isherwood May 25 '17 at 16:28
  • May be this will help you: https://stackoverflow.com/questions/7312414/how-can-i-open-a-superfish-jquery-menu-on-click-rather-than-hover – Bhuwan May 25 '17 at 16:35

1 Answers1

2

Superfish doesn't offer this option: it is intented right to open/close menu on hover in/out. In order to open/show dropdown with a click you can:

$("#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'));
})
gaetanoM
  • 41,594
  • 6
  • 42
  • 61
  • 1
    below code is enough, thanks. $('.sf-with-ul').on('mouseenter mouseout', function(e) { e.stopPropagation(); }); – sawacrow May 11 '23 at 07:21