0

我在导航中插入另一个新子菜单时遇到问题。

这是我的 JavaScript 代码：

// Main Nav Javascript Function *****************************************
var navTimer = "";
bop = new Object();
bop.targetDiv = "";
bop.hide = function(){
document.getElementById(bop.targetDiv).style.visibility = "hidden";
}

function openNav(myDiv){
if(bop.targetDiv != "") bop.hide();
    bop.targetDiv = myDiv;
    clearTimeout(navTimer);
    document.getElementById(myDiv).style.visibility = "visible";
    document.getElementById(myDiv).onmouseout = function(){
        navTimer = setTimeout("bop.hide()", 100);
    }
    document.getElementById(myDiv).onmouseover = function(){
        clearTimeout(navTimer);
    }
}

function hideNav(myDiv){
    bop.targetDiv = myDiv;
    navTimer = setTimeout("bop.hide()", 150);
}

<!-- Display Sub Nav / Clear Sub Nav -->
function SubNav(myVar){
document.getElementById(myVar).style.visibility = "visible";
}

function clearNav(myVar){
document.getElementById(myVar).style.visibility = "hidden";
}

function shortPopUp( url, name, width, height, scrollbars ) { 
    var top  = "0"; 
    var left = "0"; 

    if( scrollbars == null ) scrollbars = "0"; 

    str  = ""; 
    str += "resizable=1,titlebar=1,menubar=1,"; 
    str += "toolbar=0,location=0,directories=0,status=0,"; 
    str += "scrollbars=1" + scrollbars + ","; 
    str += "width=" + width + ","; 
    str += "height=" + height + ","; 
    str += "top=" + top + ","; 
    str += "left=" + left; 

    window.open( url, name, str ); 
}

这是我的 HTML 代码：

><div class="navItem" onMouseOver="SubNav('seat-twenty');" onMouseOut="clearNav('seat-twenty');"><a href="fps_twenty2.html" target="frame">Twenty2</a><div id='seat-twenty' class="dropDown" onMouseOver="SubNav('seat-twenty');" onMouseOut="clearNav('seat-twenty');">
<div class="navItem"><a href="fps_twenty2.html" target="frame">Twenty2 Overview</a></div>
<div class="navItem"><a href="fb_twenty2_black.html" target="frame">Twenty2</a></div>
<div class="navItem"><a href="fb_twenty2_red.html" target="frame">Twenty2-US</a></div>
<div class="navItem"><a href="fb_twenty2_red_black.html" target="frame">Twenty2-UP</a></div>
</div></div>

服务器上的页面可以在这里找到。

问题出在导航的座位选项卡下，当我尝试插入新标签“Twenty2”时，没有打开额外的子菜单，子菜单仍然停留在同一个下拉菜单中....然后我检查了代码并结束了，我的错误代码和正确的代码没有区别。

这是运行良好的代码：

> <div class="navItem" onMouseOver="SubNav('seat-heavy');"
> onMouseOut="clearNav('seat-heavy');"><a href="fps_heavy_duty.html"
> target="frame">Heavy Duty</a><div id='seat-heavy' class="dropDown"
> onMouseOver="SubNav('seat-heavy');"
> onMouseOut="clearNav('seat-heavy');">

有人知道出了什么问题吗？

4

2 回答 2

1

您的工作菜单项与它们有关联的样式表规则，例如

#seat-healthcare {
    background-color: #E7E7E7;
    position: absolute;
    margin-top: -18px;
    margin-left: 130px;
    z-index: 199;
    width: 119px;
    padding-top: 3px;
    padding-bottom: 4px;
}

但是你没有 for #seat-twenty，所以当它弹出时它会立即消失，因为它认为你已经滚动出去了，因为它没有设置 margin-left 。

总而言之，菜单以一种愚蠢的方式工作，我真的建议您使用更通用的东西，这样您就不必为每个项目都有一个样式表条目。

插入样式表样式表的相关 JS

// Browser & Platform Detection & Style Sheet Documentation *******************
if(navigator.userAgent.indexOf("Safari")!=-1){
    document.write("<link href='styles/MacSafari_style.css' rel='stylesheet' type='text/css'>");

}
if(navigator.userAgent.indexOf("Firefox")!=-1){
    if(navigator.appVersion.indexOf("Mac")!=-1){
    // Added Fix for High Rez Screens
    if((screen.width >= 1400) && (screen.height >= 1050)){
        document.write("<link href='styles/HighRez_MacMozilla_style.css' rel='stylesheet' type='text/css'>");
    } else {
        document.write("<link href='styles/MacMozilla_style.css' rel='stylesheet' type='text/css'>");
    }
} else {
    document.write("<link href='styles/Mozilla_style.css' rel='stylesheet' type='text/css'>");
    }
}
if(navigator.appName == "Microsoft Internet Explorer"){
    if(navigator.appVersion.indexOf("Mac")!=-1){ 
        document.write("<link href='styles/MacIE_style.css' rel='stylesheet' type='text/css'>");
    } else {
    document.write("<link href='styles/IE_style.css' rel='stylesheet' type='text/css'>");
}
}
于 2012-07-12T20:28:02.900 回答
1

你那里有太多的div。检查其他工作子导航菜单之一。它只是一个带有链接的单个 div。

例如，下面是表格菜单中的一个片段：

会议

我也同意另一张海报；查看如何制作 CSS 菜单。特别是http://www.htmldog.com/articles/suckerfish/dropdowns/是一篇很棒的文章，只要你不需要 IE6 支持，你就不需要使用 Javascript。

于 2012-07-12T20:43:00.227 回答