首页 > web前端 > html教程 > js菜单下拉,怎么有一个可以正常显示,另一个点击一闪就没啦_html/css_WEB-ITnose

js菜单下拉,怎么有一个可以正常显示,另一个点击一闪就没啦_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 12:08:41
原创
1539 人浏览过

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实现效果

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板