Question

在我的网站上，我在顶部有一个面板，连续包含9个图像。在页面上加载它是隐藏的，但它下面有一个标签，你可以看到div底部的3个像素。

我想要的是，当您将鼠标悬停在选项卡或面板的可见部分时，框将向下滑动，然后当鼠标不再位于面板或选项卡上时，div将向上滑动。我给了tab和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'
            });
    });
});

如果只有一个元素具有滑块 - 句柄类，那将会起作用，但是因为有2个，当你将鼠标悬停在另一个元素中时，它仍然将此事件视为“鼠标左滑块 - 手柄元素”，并且就像闪烁。我希望SORT OF中的这2个元素被视为ONE，因为当您离开选项卡并输入slider-content div时，不会触发hoverout事件，因为鼠标没有离开'slider-handle'...如果是有道理......

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

e.g。

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

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

jQuery向下滑动面板

2 个答案: