我目前正在学习Jquery的api。我了解 Jquery 有一个悬停功能,如下所示:
hover( handlerIn(eventObject) , handlerOut(eventObject))
使用第二个 handlerOut(eventObject)
,我可以处理诸如在菜单树未悬停时折叠菜单树之类的事件。
然后我查看了点击函数的 api,如下所示:
.click( [eventData], handler(eventObject) )
与我之前的描述中想要实现的目标类似,我有一个菜单树。单击列表项时,它将下拉到子菜单。我的问题是,当我单击菜单外或单击其他项目时,如何折叠此子菜单树?
最后,我使用 jquery-1.2.6.min.js 来实现这一点。
我的 jQuery:
$("li.p1:has(ul)").click(function(event){
if (this == event.target) {
var current = this;
$("#nav li:has(ul)").each(function() {
if (this != current) $(this).children().slideUp(400);
});
$("ul:first", $(this)).slideToggle(400);
}
},function(){$(this).children().slideUp(400);});
我的 HTML:
<div id="wrap">
<ul id="nav">
<li class="p1 down">Manage Subject
<ul>
<li><a href="#url">Add Subject</a></li>
<li><a href="#url">Edit Subject</a></li>
<li><a href="#url">Delete Subject</a></li>
<li><a href="#url">Export Subject</a></li>
</ul>
</li>
<li><a href="#url">Manual Crawling</a></li>
<li><a href="#url">Crawl Interval</a></li>
<li><a href="#url">Search Parameter</a></li>
</ul>
</div>
最佳答案
我能想到的一种方法是为“body”元素创建一个事件处理程序。
$('body').click(function(event){
//Needs validation.
if ($('li.p1:has(ul)') != event.target) {
$("#nav li:has(ul)").each(function() {
if (this != current) $(this).children().slideUp(400);
});
}
});
目的是向“body”元素添加一个事件处理程序,并探测是否单击了预期的元素。如果没有,请将其向上滑动。我认为可以用更好的方式做到这一点。
关于jquery - 关于 jQuery 的 .click() 的一般问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12562501/