Question

您好我为我的菜单栏编写了一个代码，如下所示。只有当鼠标悬停在菜单上时，菜单栏才会展开。但它默认会扩大。

<dt onmouseover="javascript:montre('smenu1');">

    <a href="#">&#9679; About Us</a></dt>
    <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
        <ul>
            <li><a href="../php_sql_scripts/index.php">&ordm; What is microEP?</a></li>
        </ul>
    </dd>   

<dt onmouseover="javascript:montre('smenu12');">

    <a href="#">&#9679; News</a></dt>
    <dd id="smenu12" onmouseover="javascript:montre('smenu12');" onmouseout="javascript:montre();">
        <ul>
            <li><a href="../php_sql_scripts/news.php">&ordm; Department News</a></li>
        </ul>
    </dd>   

<dt onmouseover="javascript:montre('smenu13');">

    <a href="#">&#9679; Calendar</a></dt>
    <dd id="smenu13" onmouseover="javascript:montre('smenu13');" onmouseout="javascript:montre();">
        <ul>
            <li><a href="../php_sql_scripts/calendar.php">&ordm; Calendar of events</a></li>
        </ul>
    </dd>   


<script type="text/javascript">
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
    for (var i = 1; i<=14; i++) 
    {
        if (document.getElementById('smenu'+i)) 
        {
            document.getElementById('smenu'+i).style.display='none';
        }
    }
if (d) 
    {
    d.style.display='block';
    d.style.zIndex = 12;
    }
}
</script>

Answer 1

加载页面时必须隐藏元素。有不同的方法：

使用display: none
通过CSS文件执行此操作
在其中一个不同的加载事件中调用montre()，例如window.onload

另一个话题，就像在其中一条评论中所说的那样，您应该使用库来执行此操作，例如jQuery。

菜单栏的javascript错误

1 个答案: