jQuery：Slidingown li on Hover和SlideUp on mouse out

Question

How can i make this with jquery. When mouse is over Product 1, to slidedown only elements on this category, for example :

Item1 Item2 Item3 Item4

And when the mouse is leave the Product 1, to slideup. The same with another ones

<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

Check your markup - I don't think it's quite right. That will help big time. Also, I would change it to have produt1 to be an anchor tag or something - just something to give the user the impression they can do something with that element.

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

You could also change the .hover to use .click or some other event.

Answer 2

Demo Fiddle

Firstly, your HTML is incorrect- ul can only contain li directly- and you are missing some tags, you need to change it to:

<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>

Secondly, you can actually achieve this using pure CSS to animate on the max-height property, thereby maintaining a good seperation of concerns between content (HTML), function (JS) and style (CSS)- and reducing uneccessary overhead.

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

Answer 3

Try something like that.

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