[英]Navigation Menu using jQuery (from jQuery Cookbook)
菜单应该在悬停时显示子项。 这是代码(来自http://docs.jquery.com/Cookbook/Navigation ):
<ul id="menu">
<li class="menu">Sub 1
<ul>
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
</ul>
</li>
<li class="menu">Sub 2
<ul>
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
</ul>
</li>
</ul>
jQuery代码:
$(document).ready(function() {
var toggle = function(direction, display) {
return function() {
var self = this;
var ul = $("ul", this);
if( ul.css("display") == display && !self["block" + direction] ) {
self["block" + direction] = true;
ul["slide" + direction]("slow", function() {
self["block" + direction] = false;
});
}
};
}
$("li.menu").hover(toggle("Down", "none"), toggle("Up", "block"));
$("li.menu ul").hide();
});
什么是this
在上面的切换功能? 代码是如何工作的? 什么是$("ul", this);
?
“this”指的是jQuery对象$("li.menu")
- 当悬停方法调用将切换函数应用于该对象时。 $("ul", this)
选择ul元素作为第二个参数(“this”)中提供的上下文的子元素,因此它选择嵌套在li.menu元素中的ul元素。 希望这使得悬停/切换功能有意义。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.