Search code examples
jquerymouseoverslidetogglemouseout

jQuery: How do you make a panel stay visible on mouseover, after a slideToggle?


When the mouse stays over the slide div, the slide_panel div will become visible.

However, when the mouse then exits the slide div and is over the content in the slide_panel, the panel does not remain visible.

So, once the panel is initially visible, how do you keep the toggled panel visible on mouseover?

HTML:

<div class = "slide">category:</div>
<div class = "slide_panel">
     <a href = "#" title = "">asdf</a><br />
     <a href = "#" title = "">qwerty</a><br />
</div>

<div class = "slide">another category:</div>
<div class = "slide_panel">
     <a href = "#" title = "">another asdf</a><br />
     <a href = "#" title = "">another qwerty</a><br />
</div>


jQuery:

$(".slide").mouseover(function() {
    $(this).next(".slide_panel").slideToggle();

}).mouseout(function() {
    $(this).next(".slide_panel").slideToggle();
});


Edit:
I want the slide_panel to then disappear on mouseout, to essentially behave like a dropdown menu.

Solution

  • If you can wrap your submenus under your main menu you can avoid this issue.

    Html

    <div class="slide">category:
    <div class="slide_panel"> <a href="#" title="">asdf</a>
        <br /> <a href="#" title="">qwerty</a>
        <br />
    </div>
</div>
<div class="slide">another category:
    <div class="slide_panel"> <a href="#" title="">another asdf</a>
        <br /> <a href="#" title="">another qwerty</a>
        <br />
    </div>
</div>

    JS

     $(".slide").on('mouseenter mouseleave', function () {
    $(this).find(".slide_panel").stop().slideToggle();

});

    Demo