jquery - 将鼠标悬停在父项上时如何切换内部内容

Question

当鼠标悬停在父级 LI 上时，如何添加一个脚本来扩展“section # inner”UL。

例如，将鼠标悬停在“Section 1”上将切换“Section 1 INNER”LI/UL。
我想让它动态化，因为我可能对“第 3 节”或“第 2 节”有相同的内容

JSFiddle:http://jsfiddle.net/34ng9sto/1/
查询:

    $(function () {
    $(".uSPInner").hide();
    if (!$(".uSPInner").is(":visible")) {
        $(this).closest("li").hide(); //hides the "LI" which gives the extra line... Not working.
        //alert("test");
    }
});

例子:

<ul>
    <li></li> //this will toggle the below LI because it has a nested UL
    <li> //hide this by default and toggle when hovered over the LI above it.
        <ul>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li></li> //show this by default
    <li></li> //show this by default
</ul>

Answer 1

以这种方式使用 JavaScript:

$(function () {
    $(".uSPInner").hide();
    if (!$(".uSPInner").is(":visible")) {
        $(this).closest("li").hide();
        //alert("test");
    }
    $(".clickMe").closest("li").hover(function () {
        $(this).closest("li").find("ul").slideDown();
    }, function () {
        $(this).closest("li").find("ul").slideUp();
    });
});

fiddle :http://jsfiddle.net/34ng9sto/6/