Question

jquery实现鼠标点击下拉菜单以外的地方,菜单自动隐藏

Answer 1

1.给body绑click事件，隐藏菜单。
2.给装菜单的容器处理click事件，阻止事件冒泡。

追问

新手，帮忙写个简单的例子谢谢！

追答

<div id="M1" style="width:80px; height:25px; background:#CCC; text-align:center; line-height:25px; position:relative;">
    <a href="#">菜单1</a>
    <ul style="padding:0; margin:0; display:none; background:#DDD;">
        <li><a href="#">下拉1</a></li>
        <li><a href="#">下拉2</a></li>
        <li><a href="#">下拉3</a></li>
        <li><a href="#">下拉4</a></li>
    </ul>
</div>
<script>
$(function(){
    var M1 = $('#M1')
    M1.on('click',function(e){e.stopPropagation();})
    .find('>a').on('click',function(){
        M1.find('>ul').show();
    });
    $(document).on('click',function(){M1.find('>ul').hide()})
})
</script>

Answer 2

阻止事件冒泡
event.stopPropagation()