我想出了我之前的问题，但现在我正在尝试更改父元素。
$(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:使用 > 和 .children() 之间的功能差异是什么(如果有)？
我遇到的问题是第三个函数。我无法更改祖 parent ，即顶级菜单。最终我想改变它的高度，但我现在正在调整背景颜色以使其更容易。问题是，即使我将该行更改为
$(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 */
}
/*****************************************************/
最佳答案
第一个问题可以是tested in a jsFiddle ，其控制台输出显示它们在功能上的行为相同。如果您更习惯使用与 jQuery 和 CSS 兼容的选择器，您可以选择 Child Selector ("parent > child")形成.children约定。
您的第二个问题可以直接引用 jQuery.animate() docs 来回答。 :
All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example,
width,height, or left can be animated butbackground-colorcannot be, unless thejQuery.Color()plugin is used).
在您的示例代码中，您没有表明您已包含 jQuery.Color() 插件，因此这应该是您的问题所在。
关于javascript - 无法访问父元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25002100/