jQuery：鼠标悬停时的 Slidedown li 和鼠标移出时的 SlideUp答案

【问题标题】：jQuery: Slidedown li on Hover and SlideUp on mouse outjQuery：鼠标悬停时的 Slidedown li 和鼠标移出时的 SlideUp
【发布时间】：2014-11-20 16:40:46
【问题描述】：

我怎样才能用 jquery 做到这一点。当鼠标悬停在产品 1 上时，仅向下滑动该类别中的元素，例如：

项目 1 项目2 第 3 项第4项

当鼠标离开产品 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>

【问题讨论】：

标签： javascript jquery html css

【解决方案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 或其他一些事件。

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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();
    }
});

【讨论】：