//方法裡面，怎麼加入一個點選菜單以外的所有元素，右菜單關閉。
//我想實作滑鼠移入一級、二級菜單，顯示三、四級菜單出來。點選一、二級菜單裡面的類目，可以顯示和關閉三、四級框框(這個好像我自己可以實作)。和點選一、二、三、四級菜單以外的所有元素，關閉三、四級菜單框(這個我就實作不了了，有哪位老師和大神可以幫忙補充一下，或提示一下的嗎？主要是在事件冒泡這裡不會處理了)。
我自己做了一下，就是點選頁面每個地方都會關閉三、四級菜單框，包括在一、二、三、四菜單框内點選所有類目都一樣。
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: #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: #01CB8D;}
一級菜單
- 滑鼠移入一級類目
- 一級類目
- 一級類目
- 一級類目
- 一級類目
- 一級類目
- 一級類目
- 一級類目
- 一級類目
- 一級類目
- 一級類目
- 一級類目
二級菜單
- 二級類目
- 二級類目
- 二級類目
- 二級類目
- 二級類目
- 二級類目
- 二級類目
- 二級類目
标簽
四級菜單
- 四級類目
- 四級類目
- 四級類目
三級菜單
- 三級類目
- 三級類目
- 三級類目
- 三級類目