除指定区域外点击任何地方隐藏DIV

<ul>
    <li><a href="#">主菜单1</a></li>
    <li><a href="#">主菜单2</a></li>
    <li class="li-other">
        <a href="javascript:;">其他<i class="arrow-down"></i></a>
        <div class="otherbox">
            <ul>
                <li><a href="#">子菜单1</a></li>
                <li><a href="#">子菜单2</a></li>
            </ul>
        </div>
    </li>
</ul>                

HTML如上：

JQuery如下：

$('.li-other').on('mousedown',function(event){
    event.stopPropagation();//阻止mousedown 事件冒泡（注意只阻止了mousedown事件）
    event.preventDefault();//阻止当前元素默认事件
    $('.li-other').toggleClass("active");
});
$(document).on('mousedown',function(){
    $('.li-other').removeClass("active");
});