jQuery：在滑动切换之后，如何让面板在鼠标悬停时保持可见？

Question

当鼠标停留在slide div 上时，slide_panel div 将变得可见。

但是，当鼠标随后退出slide div 并位于slide_panel 中的内容上方时，面板不 仍然可见。

那么，一旦面板最初可见，如何保持切换面板在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();
});

---

编辑：
我希望 slide_panel 然后在 mouseout 上消失，本质上就像一个下拉菜单。

Answer 1

如果您可以将子菜单包装在主菜单下，则可以避免此问题。

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

您正在触发slideToggle 两次，导致它在鼠标悬停时打开并在鼠标移出时关闭。鼠标移出时什么都不做应该保持打开状态，除非mouseover 有两个我不确定的状态。

Answer 3

试试这个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;
}

更新

Mouseout 句柄事件已更新。我也更新了fiddle。

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