Question

我怎样才能用jquery做这个。当鼠标位于产品1上时，仅滑动此类别中的元素，例如：

的Item1 项目2 项目3 ITEM4

当鼠标离开产品1时，进行滑动。与另一个相同

<div>
<li>Product1</li>
        <ul>
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
        <li>Item4</li>
        </ul>
<li>Product 2</li>
        <ul>
        <li>Item product 2</li>
        <li>Item product 2</li>
        <li>Item product 2</li>
        </ul>
<li>Product 3</li>
        <ul>
        <li>Item product 2</li>
        <li>Item product 2/li>
        </ul>

</ul>
</div>

Answer 1

检查你的加价 - 我不认为这是对的。这将有助于大时间。此外，我会更改它以使produt1成为锚标签或其他东西 - 只是为了给用户提供他们可以使用该元素做某事的印象。

Here is a jsFiddle

<强> CSS

ul li ul {
    display: none;
}

<强>的jQuery

$('ul li a').hover(function(event){
    $(this).next('ul').slideToggle('fast', function(){
    // Done.
    });
    event.preventDefault();
});

您还可以将.hover更改为使用.click或其他一些事件。

Answer 2

Demo Fiddle

首先，您的HTML不正确 - ul只能直接包含li - 而您缺少某些标记，您需要将其更改为：

<div>
    <ul>
    <li>Product1
        <ul>
            <li>Item1</li>
            <li>Item2</li>
            <li>Item3</li>
            <li>Item4</li>
        </ul>
    </li>
    <li>Product 2
        <ul>
            <li>Item product 2</li>
            <li>Item product 2</li>
            <li>Item product 2</li>
        </ul>
    </li>
    <li>Product 3
        <ul>
            <li>Item product 2</li>
            <li>Item product 2/li></li>
        </ul>
    </li>
    </ul>
</div>

其次，您可以使用纯CSS在max-height属性上实现动画，从而在内容（HTML），函数（JS）和样式（CSS）之间保持良好的关注 - 并减少不必要开销。

ul li ul{
    overflow:hidden;
    max-height:0;
    transition:max-height .5s ease-in;
}
ul li:hover ul{
    max-height:100px;
}

Answer 3

尝试类似的东西。

//style
.product {
    display: none;
}
//html
<ul class="products">
    <li class="product">Product1</li>
            <ul>
                <li>Item1</li>
                <li>Item2</li>
                <li>Item3</li>
                <li>Item4</li>
            </ul>
    <li class="product">Product 2</li>
            <ul>
                <li>Item product 2</li>
                <li>Item product 2</li>
                <li>Item product 2</li>
            </ul>
    <li class="product">Product 3</li>
            <ul>
                <li>Item product 2</li>
                <li>Item product 2/li>
            </ul>
</ul>
//jQuery
var product = $('.product');

product.on('hover', function (e) {
    if(e.type === 'mouseenter') {
        $(this).next().slideDown();
    } else {
        $(this).next().slideUp();
    }
});

jQuery：Slidingown li on Hover和SlideUp on mouse out

3 个答案:

Demo Fiddle