Heim > Artikel > Web-Frontend > js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose
js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:08:411461Durchsuche
js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦~~
单独的菜单是可以的，放入页面中就不正常了，是怎么回事呀，高手帮忙~~
蛋糕目录中是正常的，在关于我们里就弹一下就没了显示，是啥原因呀[img=http://hi.csdn.net/space-4200912-do-album-picid-1082995-goto-down.html][/img]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Chinaz菜单导航</title><style type="text/css"><!--div, ul, p{ margin: 0; padding: 0; font-weight: normal; font-style: normal; font-size: 100%; font-family: inherit;}/* Nav==========================================================*/.nav {width:990px; position: relative; margin:0px auto;}.navinner { background-color:#000000;}.navlist { height: 45px; line-height: 36px; overflow: hidden; }.nav li { float: left; display: inline; margin: 0 0 0 -2px;}.nav a { display: block; width: 200px; text-align: center; font-size: 120%;}.nav a:link, .nav a:visited { color: #fff;}.nav a.current, .nav a:hover, .nav a:active { color: #fff; font-weight: bold;}.subnav { position: absolute; top: 41px; left: 0; float: left; height: 30px; width:990px; line-height: 28px; white-space: nowrap; background-color:#1b0908;}* html .subnav { margin: 0 10px 0 -10px; /* IE 6 and below */}.subnav p { padding: 0 10px;}.subnav p span { display: block;}.subnav p.pointer { position: absolute; top: 5px; left: 0; height: 5px; width: 11px; padding: 0; margin-left: 20px; text-indent: -999em; }.subnav a { display: inline; padding: 0; font-size: 100%;}[class~="subnav"] a { }.subnav, .subnav a:link, .subnav a:visited { color: #235e99;}.subnav a:hover, .subnav a:active { color: #235e99;}.subnav a:hover, .subnav a:active { font-weight: normal; background: none; }/* subnav position and pointer position */#subnav1 { left: auto; right: 0px; }#subnav2 { left: auto; right: 0px; }#subnav3 { left: auto; right: 0px; }#subnav4 {left: auto; right: 0px;}#subnav5, #subnav6, #subnav7 { left: auto; right: 0px;}#subnav1 .pointer,#subnav2 .pointer,#subnav3 .pointer,#subnav4 .pointer { left: auto; }#subnav5 .pointer { left: auto; right: 290px; }#subnav6 .pointer { left: auto; right: 180px; }#subnav7 .pointer { left: auto; right: 70px; }#subnav1, #subnav2, #subnav3, #subnav4 { min-width: 110px;}#subnav5 { min-width: 340px; }#subnav6 { min-width: 240px; }#subnav7 { min-width: 130px; }/* Note==========================================================*/.note { margin: 0 15px 10px; color:#666666;}.note span{ float:right;}.disable { display: none;}--></style><script type="text/javascript"><!--function $(id) { return document.getElementById(id);}function showMenu (baseID, divID) { baseID = $(baseID); divID = $(divID); if (showMenu.timer) clearTimeout(showMenu.timer); hideCur(); divID.style.display = 'block'; showMenu.cur = divID; if (! divID.isCreate) { divID.isCreate = true; //divID.timer = 0; divID.onmouseover = function () { if (showMenu.timer) clearTimeout(showMenu.timer); hideCur(); divID.style.display = 'block'; }; function hide () { showMenu.timer = setTimeout(function () {divID.style.display = 'none';}, 1000); } divID.onmouseout = hide; baseID.onmouseout = hide; } function hideCur () { showMenu.cur && (showMenu.cur.style.display = 'none'); }}function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}//--></script></head><body ><div onload="MM_preloadImages('images/1_.gif','images/2_.gif','images/_1_ .gif','images/3_.gif','images/4_.gif','images/5_.gif','images/6_.gif','images/_2_ .gif','images/_3_ .gif','images/_4_ .gif','images/_01_.gif','images/_02_.gif','images/_03_.gif','images/_04_.gif')"><div class="nav"><div class="navinner"> <ul class="navlist"> <li><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','images/1_.gif',1)"><img src="images/1.gif" name="Image1" border="0" id="Image1" / alt="js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose" ></a><a href="#"></a></li> <li><a href="product.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/2_.gif',1)" onClick="showMenu('Image2','subnav1')"><img src="images/2.gif" name="Image2" border="0" id="Image2" / alt="js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose" ></a> <div class="subnav disable" id="subnav1"> <p class="pointer">.</p> <p><span> <a href="" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/_1_ .gif',1)"><img src="images/_1.gif" name="Image7" style="max-width:90%" style="max-width:90%" border="0" id="Image7" / alt="js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose" ></a><a href="#"></a> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/_2_ .gif',1)"><img src="images/_2.gif" name="Image8" style="max-width:90%" style="max-width:90%" border="0" id="Image8" / alt="js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose" ></a><a href="#"></a> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/_3_ .gif',1)"><img src="images/_3.gif" name="Image9" style="max-width:90%" style="max-width:90%" border="0" id="Image9" / alt="js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose" ></a><a href="#"></a> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','images/_4_ .gif',1)"><img src="images/_4.gif" name="Image10" style="max-width:90%" style="max-width:90%" border="0" id="Image10" / alt="js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose" ></a><a href="#"></a> </span></p> </div> </li> <li><a href="activity.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/3_.gif',1)" onClick="showMenu('Image3','subnav2')"><img src="images/3.gif" name="Image3" border="0" id="Image3" / alt="js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose" ></a> </li> <li><a href="jifen.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/4_.gif',1)" onClick="showMenu('Image4','subnav3')"><img src="images/4.gif" name="Image4" border="0" id="Image4" / alt="js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose" ></a> </li> <li><a href="about_us.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/5_.gif',1)" onClick="showMenu('Image5','subnav4')"><img src="images/5.gif" name="Image5" border="0" id="Image5" / alt="js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose" ></a> <div class="subnav disable" id="subnav4"> <p class="pointer">.</p> <p><span> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','images/_01_.gif',1)"><img src="images/_01.gif" name="Image11" style="max-width:90%" style="max-width:90%" border="0" id="Image11" / alt="js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose" ></a><a href="#"></a> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','images/_02_.gif',1)"><img src="images/_02.gif" name="Image12" style="max-width:90%" style="max-width:90%" border="0" id="Image12" / alt="js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose" ></a><a href="#"></a> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','images/_03_.gif',1)"><img src="images/_03.gif" name="Image13" style="max-width:90%" style="max-width:90%" border="0" id="Image13" / alt="js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose" ></a><a href="#"></a> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','images/_04_.gif',1)"><img src="images/_04.gif" name="Image14" style="max-width:90%" style="max-width:90%" border="0" id="Image14" / alt="js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose" ></a><a href="#"></a> </span></p> </div> </li> </li> </ul></div> </div></div></div></body></html>
回复讨论(解决方案)
蛋糕目录中是正常的，在关于我们里就弹一下就没了显示
你这些在哪。。
我这ie8和火狐都没什么反应
我的资源里有纯css+div的弹出菜单，可供你参考。
会不会跟事件冒泡有关？你去网上查查怎么JS阻止事件冒泡，应该在弹出框显示的代码后面加上阻止事件冒泡，就会好了。
事件冒泡与浏览器有关，具体写法，网上也都找得到的，我从前在工作中也遇到过类似的情况。。希望可以帮助到你。
我佩服你的勇气啊，看到你写的html，好像是直接在dreamweaver里操作的弹出隐藏，太复杂了，且不易维护更新，去学下div+css+jquery，图片的切换现在很多都是用css sprite（把一些琐碎图片放到整张大图片），做成背景的切换，导航弹出同隐藏也比较流行的是jquery实现效果
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：css控制gif图片作为网页的背景_html/css_WEB-ITnoseNächster Artikel：请问如何调节这个布局的文字上下高度，谢谢！_html/css_WEB-ITnose