//方法里面，怎么加入一個點擊菜單以外的所有元素，右菜單關閉。//我想實現鼠標移入一級、二級菜單，顯示三、四級菜單出來。點擊一、二級菜單里面的類目，可以顯示和關閉三、四級框框（這個好像我自己可以實現）。和點擊一、二、三、四級菜單以外的所有元素，關閉三、四級菜單框（這個我就實現不了了，有哪位老師和大神可以幫忙補充一下，或提示一下的嗎？主要是在事件冒泡這里不會處理了）。????????我自己做了一下，就是點擊頁面每個地方都會關閉三、四級菜單框，包括在一、二、三、四菜單框內點擊所有類目都一樣。<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script>$(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();}</script><style>*{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;}</style></head><body><div class="menu wrapper">?<!---- ?導航菜單 ---->?<div class="mod-menu">? ?<div class="mod-left">? ? ?<h3>一級菜單</h3>? ? ?<ul class="subject">? ? ? ?<li>鼠標移入一級類目</li>? ? ? ?<li>一級類目</li>? ? ? ?<li>一級類目</li>? ? ? ?<li>一級類目</li>? ? ? ?<li>一級類目</li>? ? ? ?<li>一級類目</li>? ? ? ?<li>一級類目</li>? ? ? ?<li>一級類目</li>? ? ? ?<li>一級類目</li>? ? ? ?<li>一級類目</li>? ? ? ?<li>一級類目</li>? ? ? ?<li>一級類目</li>? ? ?</ul>? ? ?<h3>二級菜單</h3>? ? ?<ul class="major">? ? ? ?<li>二級類目</li>? ? ? ?<li>二級類目</li>? ? ? ?<li>二級類目</li>? ? ? ?<li>二級類目</li>? ? ? ?<li>二級類目</li>? ? ? ?<li>二級類目</li>? ? ? ?<li>二級類目</li>? ? ? ?<li>二級類目</li>? ? ?</ul>? ?</div>? ?<div class="mod-right">? ? ?<div class="menu-title">? ? ? ?<img src="" alt="">? ? ? ?<h3>標簽</h3>? ? ?</div>? ? ?<div class="item-major"> ?? ? ? ?<h4>四級菜單</h4>?? ? ? ?<ul>? ? ? ? ?<li><a href="">四級類目</a></li>? ? ? ? ?<li><a href="">四級類目</a></li>? ? ? ? ?<li><a href="">四級類目</a></li>? ? ? ?</ul>? ? ?</div>? ? ?<div class="menu-item">? ? ? <h3>三級菜單</h3>? ? ? ?<ul class="spe-child">? ? ? ? ?<li>三級類目</li>? ? ? ? ?<li>三級類目</li>? ? ? ? ?<li>三級類目</li>? ? ? ? ?<li>三級類目</li>? ? ? ?</ul>? ? ?</div>? ?</div>?</div>?</div></body></html>
這個JQ方法，點擊菜單框以外的所有元素，關閉三、四級菜單框，怎么實現?。?/h1>
目前暫無任何回答
- 0 回答
- 0 關注
- 1269 瀏覽
添加回答
舉報
0/150
提交
取消