html三级菜单点击关闭,这个JQ方法，点击菜单框以外的所有元素，关闭三、四级菜单框，怎么实现啊？...

//方法里面，怎么加入一个点击菜单以外的所有元素，右菜单关闭。

//我想实现鼠标移入一级、二级菜单，显示三、四级菜单出来。点击一、二级菜单里面的类目，可以显示和关闭三、四级框框(这个好像我自己可以实现)。和点击一、二、三、四级菜单以外的所有元素，关闭三、四级菜单框(这个我就实现不了了，有哪位老师和大神可以帮忙补充一下，或提示一下的吗？主要是在事件冒泡这里不会处理了)。

我自己做了一下，就是点击页面每个地方都会关闭三、四级菜单框，包括在一、二、三、四菜单框内点击所有类目都一样。

Document

$(document).ready(function() {

//　左侧导航菜单

main_menu();

});

//方法里面，怎么加入一个点击菜单以外的所有元素，右菜单关闭。

//我想实现鼠标移入一级、二级菜单，显示三、四级菜单出来。点击一、二级菜单里面的类目，可以显示和关闭三、四级框框(这个好像我自己可以实现)。和点击一、二、三、四级菜单以外的所有元素，关闭三、四级菜单框(这个我就实现不了了，有哪位老师和大神可以帮忙补充一下，或提示一下的吗？主要是在事件冒泡这里不会处理了)。

function main_menu() {

var menu_right=function () {

$(".subject").mouseenter(function() {

$(".mod-right").show();

});

$(".subject li").each(function() {

$(this).click(function(event) {

$(".mod-right").show();

});

});

};

menu_right();

}

*{margin:0; border:0; padding:0;}

body {text-align: center; margin: 0; }

a {text-decoration: none; color: #333;}

ul li{margin:0;padding:0;list-style-type:none;}

body, html {font: 14px/1.5 "微软雅黑","PingFang SC","Microsoft YaHei",Helvetica,"Helvetica Neue",Tahoma,

Arial,sans-serif;}

.mod-menu {position: absolute;top: 0;left: 11px;}

.mod-left {float: left; width: 224px; background-color: #FFF; padding-top: 3px; border: 1px solid #ccc; border-top: none;}

.mod-left h3 {clear: both; font: 21px "微软雅黑"; line-height: 40px; background-color: #22C9DA; color: #FFF;}

.mod-left ul {line-height: 34px; margin: 10px; background-image: url(../images/menu-b.png);  display: inline-block;}

.mod-left ul li {float: left; padding-left: 7px; margin-right: 8px;}

.mod-left ul li a {color: #000;}

.mod-left ul li a:hover {color: /*#25FF01*/#01CB8D;}

.mod-right {float: right; background-color: #FFF; width: 800px; padding: 20px; box-shadow: 1px 1px 2px 0 #000;

display: none;}

.menu-title {width: 100%; margin-bottom: 10px; border-bottom: 1px #ccc solid; text-align: left; height: 50px; line-height: 50px;}

.menu-title img {float: left; width: 40px; height: 40px; margin-right: 15px;}

.menu-title h3 {font-family: "微软雅黑"; font-size: 21px; color: #30AAB7; font-weight: 500;}

.item-major {width: 760px; padding: 10px 20px; margin-bottom: 10px; background-color: #ECECEC; text-align: left; font-family: "黑体";}

.item-major h4 {padding-bottom: 5px; font-size: 16px;}

.item-major ul {display: inline-block;}

.item-major ul li {float: left; margin-right: 15px; line-height: 23px; font-size: 15px;}

.item-major ul li a {color: #6A6A6A;}

.item-major ul li a:hover {color: #FFBD27;}

.menu-item {width: 780px; border: 1px #ccc solid; text-align: left; padding: 10px 0 10px 20px;}

.menu-item ul {display: inline-block;}

.menu-item ul li {float: left; line-height: 30px; margin-right: 20px;}

.menu-item ul li a {color: #000; font-family: "微软雅黑";}

.menu-item ul li a:hover {color: /*#25FF01*/#01CB8D;}

一级菜单

• 鼠标移入一级类目
• 一级类目
• 一级类目
• 一级类目
• 一级类目
• 一级类目
• 一级类目
• 一级类目
• 一级类目
• 一级类目
• 一级类目
• 一级类目

二级菜单

• 二级类目
• 二级类目
• 二级类目
• 二级类目
• 二级类目
• 二级类目
• 二级类目
• 二级类目

标签

四级菜单

• 四级类目
• 四级类目
• 四级类目

三级菜单

• 三级类目
• 三级类目
• 三级类目
• 三级类目