javascript - 何时关闭自定义构建 jQuery 下拉菜单

Question

我使用 <div> 制作了一个非常简单的下拉菜单( parent )，<span> (当前选择)和 <ul> (选项)。它工作正常。我现在想做的是，如果用户单击页面上的任何位置，将其关闭，就像一个“真实的”<select>元素。

我现在做的是:

$(document).delegate('body','click',function(){
   if(isExpanded){close();}
});

而且它有效。我担心的是性能。监听文档节点上的点击事件是否明智？有没有更好的办法？

谢谢。

Answer 1

您还可以使用 blur 事件。虽然您的元素默认不支持它，但添加 tabindex=... 会使它们触发 blur 事件:http://jsfiddle.net/UgSTa/ .

HTML:

<div tabindex="1">
    <ul>
        <li>1</li>
        <li>2</li>
        <li><span>3</span></li>
    </ul>
</div>

JavaScript:

$('div').blur(function(){alert(1)})