Question

我想出了我之前的问题，但现在我正在尝试更改父元素。

$(document).ready(function() {
    var itemheight = 30;

    //When mouse rolls over
    $("li").mouseover(function() {
        var numitems = $(this).children().children().length;
        var newheight = numitems * itemheight + 18;
        $(this).stop().animate({
            height: newheight
        }, {
            queue: false,
            duration: 600,
            easing: 'swing'
        });
    });

    //When mouse is removed
    $("li").mouseout(function() {
        //change totalheight back to 18;
        $(this).stop().animate({
            height: '18px'
        }, {
            queue: false,
            duration: 600,
            easing: 'swing'
        });
    });

    //When mouse rolls over
    $("li ul li").mouseover(function() {
        $(this).stop().animate({
            height: 30
        });
        $(this).parent().parent().animate({
            backgroundColor: '#D52716'
        });
    });

    //When mouse is removed
    $("li ul li").mouseout(function() {
        $(this).stop().animate({
            height: '18px'
        }, {
            queue: false,
            duration: 600,
            easing: 'swing'
        })
    });

});

问题1：使用＆gt;之间的功能差异（如果有的话）是什么？和.children（）？

我遇到的问题是第三个功能。我不能让祖父母，即顶级菜单改变。最终我想改变它的高度，但我正在玩背景颜色，以便现在更容易。事情是，即使我将该行更改为

$(this).animate({backgroundColor:'#D52716'});

什么都没发生。这就像它根本没有调用那个功能。问题2：我做错了什么？

这是我的HTML

<!DOCTYPE HTML>
<HTML>
<HEAD>
<title>Basic Menu System</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="menuanim.js"></script>
<link href="menujq.css" type="text/css" rel="stylesheet">
</HEAD>

<BODY>
<ul id=topmenu>
<li class="green">First item</li>
<li class="yellow">Second item
    <ul>
    <li>Submenu 
    <ul>
        <li>Tiertiary01</li>
        <li>Tiertiary02</li>        
        <li>Tiertiary03</li>
        </ul>
    </li>
    <li>Submenu2</li>
    </ul>
</li>
</ul>
<br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>  <!-- End maincontent -->

</BODY>
</HTML>

我的CSS

/ *带下拉菜单的顶级菜单* /

#topmenu, #topmenu ul {
list-style: none;
text-align: center;
margin: 0;
padding: 0;
}


#topmenu li {
text-align:center;
overflow:hidden;
float: left;
font-size: 12px;
font-weight: bold;
border: 3px solid #A0A0A0;
width: 150px;
height: 18px;
padding: 3px;
color: #000000;
}


.green{background:#6AA63B;}
.yellow{background:#FBC700;}
.red{background:#D52100;}
.purple{background:#5122B4;}
.blue{background:#0292C0;}
/****************************************************/

/* Second level */
#topmenu li ul {
display: none;
}

#topmenu li:hover > ul {
display: block;
position: relative;
left: -6px;
top: 7px;
}

#topmenu li ul li {     /* All attributes are inherited */
}

/*****************************************************/

Answer 1

第一个问题可以是tested in a jsFiddle，其控制台输出显示功能上它们的行为相同。如果您更习惯使用与jQuery和CSS兼容的选择器，则可以在Child Selector ("parent > child")约定上选择.children表单。

您的第二个问题可以直接来自jQuery.animate() docs：

所有动画属性都应设置为单个数值，除非如下所述;大多数非数字属性不能使用基本jQuery功能进行动画处理（例如，width，height，或左边可以动画，但background-color不能，除非使用jQuery.Color()插件。）

在您的示例代码中，您尚未表明已包含jQuery.Color()插件，因此这应该是您的问题所在。

Answer 2

问题1：

是的，您可以通过多种方式进行子选择，但其中一种比另一种更容易阅读。 .children()比.find('> *')更具可读性，尽管他们做同样的事情。

问题2：

esqew's answer可能就是你想要的。您还可以考虑使用closest()而不是.parent().parent() - 它使代码对DOM结构更改更加稳定。

无法访问父元素

2 个答案:

问题1：

问题2：