Fatal编程技术网

Javascript 下拉菜单问题

javascript html css drop-down-menu

Javascript 下拉菜单问题,javascript,html,css,drop-down-menu,Javascript,Html,Css,Drop Down Menu,我正在为学校内部网站写一个下拉菜单，我创造了一个相当奇怪的问题。子菜单与所选菜单y位置偏移36px。 这是代码的摘录（请原谅质量：D） #纳瓦加通巴尔{ 保证金：0； 填充：0； z指数：30； } #纳瓦加通巴尔{ 列表样式：无； 浮动：左； 字体：粗体12px“Arial”； 左边距：10px； 宽度：96px； } #navagationBar li a{ 显示：块； 边距：0 1px 0； 填充：4px10px； 宽度：136px； 颜色：#FFFFFF； 文本对齐：居中； 文字装饰

我正在为学校内部网站写一个下拉菜单，我创造了一个相当奇怪的问题。子菜单与所选菜单y位置偏移36px。

这是代码的摘录（请原谅质量：D）


#纳瓦加通巴尔{
保证金：0；
填充：0；
z指数：30；
}
#纳瓦加通巴尔{
列表样式：无；
浮动：左；
字体：粗体12px“Arial”；
左边距：10px；
宽度：96px；
}
#navagationBar li a{
显示：块；
边距：0 1px 0；
填充：4px10px；
宽度：136px；
颜色：#FFFFFF；
文本对齐：居中；
文字装饰：无；
}
#navagationBar li a:悬停{
背景：#796952；
}
#navagationBar分区{
位置：绝对位置；
可见性：隐藏；
背景：透明；
}
#navagationBar分区a{
位置：相对位置；
显示：块；
填充物：5px10px；
宽度：136px；
空白：nowrap；
文本对齐：左对齐；
文字装饰：无；
背景：#796952；
颜色：#FFF；
字体：9px“Arial”；
}
#导航条分区a:悬停{
背景:#9696；
颜色：#FFF；
}
#纳瓦加提亚巴酒店{
颜色：#FFF；
}
纳瓦加翁分区{
背景#2d221c；
高度：28px；
}
副处长{
左：156px；
}
var menuItem=0；
var子项=0；
var时限=250；
var closeTimer=0；
var closeSubTimer=0；
//打开菜单
功能菜单（id）{
停止计时器（）；
//如果图层已打开，请将其关闭
如果（菜单项）{
menuItem.style.visibility='hidden'；
}
//然后将用户单击的一个设置为显示
menuItem=document.getElementById（id）；
menuItem.style.visibility='visible'；
}
函数openSub（id）{
stopSubTimer（）；
//如果图层已打开，请将其关闭
若有（分项）{
subItem.style.visibility='hidden'；
}
子项=document.getElementById（id）；
subItem.style.visibility='visible'；
}
函数关闭（）{
如果（菜单项）{
menuItem.style.visibility='hidden'；
}
}
函数closeSub（）{
若有（分项）{
subItem.style.visibility='hidden'；
}
}
函数startTimer（）{
closeTimer=window.setTimeout（关闭，timeLimit）；
}
函数startSubTimer（）{
closeSubTimer=window.setTimeout（closeSub，timeLimit）；
}
//停止计时
函数stopTimer（）{
if（关闭计时器）{
清除超时（关闭计时器）；
closeTimer=null；
}
}
//TODO:使更模块化
函数stopSubTimer（）{
if（closeSubTimer）{
clearTimeout（closeSubTimer）；
closeSubTimer=null；
}
}
//如果用户单击“退出”，请关闭此框
document.onclick=close（）；
document.onclick=closeSub（）；

    

  • 

    •
DOM访问

首先，您必须绝对确保不通过
getElementbyId（）访问DOM在加载整个页面之前

您必须在结束body标记之前调用脚本，或者将整个代码包装在一个函数中，并在结束时，即结束body标记之前调用脚本。这是雅虎！和谷歌前端开发最佳实践

或者，您可以使用JQuery的
$（document）.ready（）函数
或另一个JavaScript库的文档加载函数。然而，使用一个库来解决这个问题未免太过分了

全局变量

通过声明var
menuItem=0在函数范围之外，将变量声明为全局变量，这是一件非常糟糕的事情！它会使整个网站的名称空间变得混乱。在函数内声明变量以创建闭包

此外，您也不希望用整数初始化menuItem变量，因为稍后将引用对象（DOM对象）。尽管Javascript不需要对类型进行dclar，而且这会起作用，但它会给代码的读者带来困惑。只需使用
var menuItem在函数内部

CSS块格式上下文


尝试将
display:inline
或
display:block
与HTML元素一起使用。确保阅读并理解。
尝试将子菜单div置于相应的a标记之前（而不是

<html>
<head>  
    <style>
    #navagationBar {
        margin: 0;
        padding: 0;
        z-index: 30;
    }

    #navagationBar li  {    
        list-style: none;
        float: left;
        font: bold 12px 'Arial';
        margin-left: 10px;
        width: 96px;
    }

    #navagationBar li a  {  
        display: block;
        margin: 0 1px 0 0;
        padding: 4px 10px;
        width: 136px;
        color: #FFFFFF;
        text-align: center;
        text-decoration: none;
    }

    #navagationBar li a:hover  {    
        background: #796952;
    }

    #navagationBar div  {   
        position: absolute;
        visibility: hidden;
        background: transparent; 
    }

    #navagationBar div a  { 
        position: relative;
        display: block;
        padding: 5px 10px;
        width: 136px;
        white-space: nowrap;
        text-align: left;
        text-decoration: none;
        background: #796952;  
        color: #FFF;
        font: 9px "Arial";
    }

    #navagationBar div a:hover  {   
        background: #969696;
        color: #FFF;
    }

    #navagationBar a  {
        color: #FFF;
    }

    div.navagation  {
        background: #2d221c;

        height: 28px;
    }

    div.sub  {
        left: 156px;
    }
    </style>
    <!-- BG COLOR: #2d221c
         FORERGROUND: #3c3429
         HOVER: #796952
         -->
    <script>    
            var menuItem = 0;
            var subItem = 0;

            var timeLimit = 250;
            var closeTimer = 0;
            var closeSubTimer = 0;


            // open menu
            function openMenu(id)  {
                stopTimer();

                // If a layer is already open close it
                if (menuItem)  {
                    menuItem.style.visibility = 'hidden';
                }

                // Then set the one clicked on by the user to be shown
                menuItem = document.getElementById(id);
                menuItem.style.visibility = 'visible';
            }

            function openSub(id)  {
                stopSubTimer();

                // If a layer is already open close it
                if (subItem)  {
                    subItem.style.visibility = 'hidden';
                }

                subItem = document.getElementById(id);
                subItem.style.visibility = 'visible';
            }

            function close()  {
                if (menuItem)  {
                    menuItem.style.visibility = 'hidden';
                }
            }

            function closeSub()  {
                if (subItem)  {
                    subItem.style.visibility = 'hidden';
                }
            }

            function startTimer()  {
                closeTimer = window.setTimeout(close, timeLimit);
            }

            function startSubTimer()  {
                closeSubTimer = window.setTimeout(closeSub, timeLimit);
            }

            // Stop timing
            function stopTimer()  {
                if (closeTimer)  {
                    window.clearTimeout(closeTimer);
                    closeTimer = null;
                }
            }

            // TODO: Make more modular          
            function stopSubTimer()  {
                if (closeSubTimer)  {
                    window.clearTimeout(closeSubTimer);
                    closeSubTimer = null;
                }
            }

            // If the user click out, close teh box
            document.onclick = close();
            document.onclick = closeSub();
    </script>
</head>
    <body>
        <div class="navagation">
            <ul id="navagationBar">
                <li><a href="#" onMouseOver="openMenu('menu0')" onMouseOut="startTimer()">HSIE</a>
                    <div id="menu0" onMouseOver="stopTimer()" onMouseOut="startTimer()">
                        <a href="#" onMouseOver="openSub('submenu0_0')" onMouseOut="startSubTimer()">Business Studies</a>
                        <div class='sub' id="submenu0_0" onMouseOver="openSub('submenu0_0')" onMouseOut="startSubTimer()">
                            <a href='view.php?id=110'>Year 11</a>
                            <a href='view.php?id=109'>Year 12</a>
                        </div>
                        <a href="#" onMouseOver="openSub('submenu0_1')" onMouseOut="startSubTimer()">Commerce</a>
                        <div class='sub' id="submenu0_1" onMouseOver="openSub('submenu0_1')" onMouseOut="startSubTimer()">
                            <a href='view.php?id=112'>Year 9</a>
                            <a href='view.php?id=111'>Year 10</a>
                        </div>
                        <a href="#" onMouseOver="openSub('submenu0_2')" onMouseOut="startSubTimer()">Geography</a>
                        <div class='sub' id="submenu0_2" onMouseOver="openSub('submenu0_2')" onMouseOut="startSubTimer()">
                            <a href='view.php?id=48'>Year 7</a>
                            <a href='view.php?id=92'>Year 8</a>
                            <a href='view.php?id=105'>Year 9</a>
                            <a href='view.php?id=70'>Year 10</a>
                            <a href='view.php?id=69'>Year 11</a>
                            <a href='view.php?id=131'>Year 12</a>
                        </div>
                        <a href="#" onMouseOver="openSub('submenu0_3')" onMouseOut="startSubTimer()">History</a>
                        <div class='sub' id="submenu0_3" onMouseOver="openSub('submenu0_3')" onMouseOut="startSubTimer()">
                            <a href='category.php?id=89'>Junior</a>
                            <a href='category.php?id=90'>Senior</a>
                        </div>
                    </div>
                </li>
            </ul>  
        </div>
    </body>
</html>



<div class='sub' id="submenu0_0" onMouseOver="openSub('submenu0_0')" onMouseOut="startSubTimer()">
    <a href='view.php?id=110'>Year 11</a>
    <a href='view.php?id=109'>Year 12</a>
</div>
<a href="#" onMouseOver="openSub('submenu0_0')" onMouseOut="startSubTimer()">Business Studies</a>



<a href="#" onMouseOver="openSub('submenu0_0')" onMouseOut="startSubTimer()">Business Studies</a>
<div class='sub' id="submenu0_0" onMouseOver="openSub('submenu0_0')" onMouseOut="startSubTimer()">
    <a href='view.php?id=110'>Year 11</a>
    <a href='view.php?id=109'>Year 12</a>
</div>



#submenu0_0 > a {top:0px;}
#submenu0_1 > a {top:25px;}
#submenu0_2 > a {top:50px;}
#submenu0_3 > a {top:75px;}



<!DOCTYPE HTML>
<html>
<head>

</head>
<body>

</body>
</html>