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;
}

<强>更新

鼠标移除句柄事件已更新。我也更新了fiddle。

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

jQuery：在slideToggle之后，如何使面板在鼠标悬停时保持可见？

3 个答案:

HTML

JS

Demo