0


当鼠标停留在slidediv 上时，slide_paneldiv 将变得可见。

但是，当鼠标随后退出slidediv 并位于 中的内容上方时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，本质上就像一个下拉菜单。

4

3 回答 3

3

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

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();

});

演示

于 2013-06-10T02:11:01.577 回答
1

试试这个小提琴

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 句柄事件已更新。我也更新了小提琴。

$(".slide").mouseout(function () {
    $(this).find(".slide_panel").stop().slideToggle();
});
于 2013-06-10T02:33:08.227 回答
1

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

于 2013-06-10T02:11:31.473 回答