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

Question

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.

Answer 1

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

Answer 2

You're firing the slideToggle twice, causing it to open on mouse over and close on mouseout. Doing nothing on mouse out should keep it open, unless mouseover has two states which I'm not sure about.

Answer 3

Try this Fiddle

JS:

$(".slide").mouseover(function () {
    $(".slide_panel").stop(true, true);
    $(".slide_panel").hide(0);
    $($(this).next(".slide_panel")[0]).slideToggle();

}).mouseout(function () {
    $(".slide_panel:visible").slideToggle();
});

CSS

.slide_panel {
  display: none;
}

UPDATE

Mouseout handle event has been updated. I updated the fiddle too.

$(".slide").mouseout(function () {
    $(this).find(".slide_panel").stop().slideToggle();
});