jQuery 下滑面板

Question

在我的网站上，我的顶部有一个面板，其中连续包含 9 个图像。在页面加载时，它是隐藏的，但它下面有一个选项卡，您可以看到 div 底部的 3 个像素。

我想要的是，当您将鼠标悬停在选项卡或面板的可见部分上时，框将向下滑动，然后当鼠标不再位于面板或选项卡上时，div 将向上滑动。我给选项卡和 div 都指定了“slider-handle”类。这就是 html 的样子：

<div id="slider-wrapper">
    <div id="slider-content" class="slider-handle">
        <img src="blabla.jpg" /> (*9)
    </div>
    <div id="slider-tab" class="slider-handle">
        <span>Click here 2 open slider blabla.</span>
    </div>
</div>

我想要的 jQuery 是这样的：

$(document).ready(function () {
    $('.slider-handle').hover(function () {
        $('slider-content').animate({
            height: '50px'
        });
    }, function () {
        $('slider-content').animate {
            {
                height: '3px'
            });
    });
});

如果只有一个元素具有 slider-handle 类，那么这将起作用，但是因为有 2 个，当您将鼠标悬停在一个元素之外并进入另一个元素时，它会起作用仍然将此事件视为“鼠标左滑块手柄元素”，并且存在闪烁现象。我希望这两个元素被视为一个元素，因为当您离开选项卡并输入滑块内容 div 时，不会触发悬停事件，因为鼠标尚未离开“滑块手柄”...如果那样有道理...

Answer 1

您可以使用 slider-wrapper div，如下所示：

$(document).ready(function () {
    $('#slider-wrapper').hover(function () {
        $('#slider-content').animate( {height: '50px'} );
    }, function () {
        $('#slider-content').animate( {height: '3px'} );
    });
});

由于它包含两个元素，因此它们将被视为一个元素。

希望这有帮助。干杯

Answer 2

您可以使用现有的 ID，并使用 #slider-wrapper 本身来触发“mouseleave”事件，因为它仍然会包裹选项卡和

我使用的 click 内容打开选项卡，但您也可以使用 mouseenter

例如

$('#slider-tab').click(function() {
    $('#slider-content').slideDown('normal');
});

$('#slider-wrapper').mouseleave(function() {
    $('#slider-content').slideUp('normal');
});