Question

我想使用jquery创建一个简单的菜单。

我想在父元素的鼠标悬停上滑动另一个<li>（包含ul）的子<li>个元素，如果鼠标离开它们，则将它们向上滑动。

目前我使用此代码，但它不起作用，如果我离开父元素，则滑动子元素。

<head>
<title></title>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
    function showSubLi() {
        //alert("Hallo");
        if (!$('#first').children().is(':visible')) {
            $('#first').children().slideDown();
        }

    }

    function hideSubLi() {
        //alert("Hallo");
        if ($('#first').children().is(':visible')) {
            $('#first').children().slideUp();
        }
    }
</script>

<body>
<ul>
    <li id="first" onmouseover="showSubLi();" style="background-color: Yellow">FirstLI
            <ul style="background-color: Green" onmouseout="hideSubLi();">
                <li>LI 1</li>
                <li>LI 2</li>
                <li>LI 3</li>
                <li>LI 4</li>
            </ul>
    </li>
</ul>
<script type="text/javascript">
    $(document).ready(function () {
        $('#first').children().hide();
    });
</script>

这段代码出了什么问题？

Answer 1

我猜这会让你接近你想要的东西：

$('ul > li').hover(function(){
    $(this).children('ul').slideToggle();
}).children('ul').hide();

<强> ^{http://www.jsfiddle.net/yijiang/De54m/}

我们可以使用jQuery的事件处理功能与hover()函数以及slideToggle()取代多重{{1}，而不是几乎在任何情况下都不应该使用的内联事件。调用。

Answer 2

问题是，行$('#first').children()引用ul元素而不是li元素。相反，您可以使用$('#first>ul>li')，它引用li元素。

您的更正代码：

<head>
<title></title>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
    function showSubLi() {
        //alert("Hallo");
        if (!$('#first>ul>li').is(':visible')) {
            $('#first>ul>li').slideDown();
        }

    }

    function hideSubLi() {
        //alert("Hallo");
        if ($('#first>ul>li').is(':visible')) {
            $('#first>ul>li').slideUp();
        }
    }
</script>

<body>
<ul>
    <li id="first" onmouseover="showSubLi();" style="background-color: Yellow">FirstLI
            <ul style="background-color: Green" onmouseout="hideSubLi();">
                <li>LI 1</li>
                <li>LI 2</li>
                <li>LI 3</li>
                <li>LI 4</li>
            </ul>
    </li>
</ul>
<script type="text/javascript">
    $(document).ready(function () {
        $('#first>ul>li').hide();
    });
</script>

slideDown和Up sub <li>元素</li>

2 个答案: