我一直收到未捕获的引用错误:未定义下拉菜单和未捕获的类型错误:无法读取 null 的属性“样式”

i keep getting Uncaught ReferenceError: dropMenu is not defined and Uncaught TypeError: Cannot read property 'style' of null

本文关键字：错误 null 读取 样式 属性 未定义 一直 引用 下拉菜单 类型      更新时间：2023-09-26

>im 试图用子菜单制作导航栏，但我不断得到 dropMenu 没有定义，当我将鼠标悬停在两个巴黎链接上时，我得到 未捕获的类型错误： 无法读取 null 的属性"样式"，不知道是什么导致了这种情况这是我的代码.html

<html>
<link type="text/css"  rel="stylesheet" href="vacation.css"/>
<head>
<title>Paris</title>
</head>
<body>
<div id="menus">
<div id ="parismenu">
<a href="#" onmouseover="dropMenu('dropmenu1')">Paris</a>
<div id="dropmenu1" class="dropmenus">
<a href="#">apple</a>
</div>
</div>
<div id ="disneymenu">
<a href="#" onmouseover="dropMenu('dropmenu2')">Paris</a>
<div id="dropmenu2" class="dropmenus">
<a href="#">apple</a>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
 <script type="text/javascript" src="vacation.js"></script>
  </html>

.css

div#menus{
margin-left:16px;
 }
 div#menus> div{
 float:left;
 margin:0px 20px;
 }
 div.dropmenus{
 display:none;
 position:absolute;
 top:100px;
 width:120px;
 background:teal;
 z-index:2;
 padding:4px;
 border: blue 3px solid;
 border-top:none;
 border-radius:5px 5px 5px 5px;
 }
 div.dropmenus>a{
 display:block;
 margin:4px;
 padding:7px;
 font-size:14px;
 text-decoration:none;
 background:blue;
 border-radius:3px;
 color:red;
 }
 div#dropmenu1{
 left:24px;
 }
 div#dropmenu2{
 left:116px;
 }

JavaScript

 var fade=function(){
 return{
 init:function(id,flag,target){
 this.elem=document.ElementById(id);
 clearInterval(this.elem.si);
 this.target=target ? target : flag ? 100 : 0;
 this.flag = flag||1;
 this.alpha = this.elem.stle.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
 this.elem.si=setIntterval(function(){fade.fadep()},20);
 },
 fadep:function(){
 if(this.alpha==this.target){
 clearInterval(this.elem.si);
 }
 else{
 var value=Math.round(this.alpha + ((this.target - this.alpha) * .05)) +(-1 * this.flag);
 this.elem.style.opacity=value/100;
 this.elem.style.filter='alpha(opacity=' + value + ')';
 this.alpha=value
 }}}}();
 var menu= ["dropmenu1","dropmenu2","dropmenu3"];
 function dropMenu(x){
 for(var m in menu){
 if(menu[m] != x){
 document.getElementById(menu[m]).style.display="none";
 }}
 if(document.getElementById(x).style.diplay=="block"){
 fade.init(x,1);
  }
 else{
 fade.init(x,0)}}

你的数组包含三个 id，而你的 html 只有前两个 - 所以 

document.getElementById(menu[m])

如果 m === 2，则未定义

因此，您需要从菜单数组中删除"dropmenu3"。

另外，这一行：

this.elem=document.ElementById(id);

应该是

this.elem=document.getElementById(id);

如果你想在没有jquery的情况下做到这一点，这里有你需要的代码。原始JavaScript中有几个拼写错误。我还更改了 if 以便立即隐藏所有未悬停的元素。

.HTML

<div id="menus">
    <div id="parismenu">
        <a href="#" onmouseover="dropMenu('dropmenu1');">Paris</a>
        <div id="dropmenu1" class="dropmenus">
            <a href="#">apple</a>
        </div>
    </div>
    <div id="disneymenu">
        <a href="#" onmouseover="dropMenu('dropmenu2');">Paris</a>
        <div id="dropmenu2" class="dropmenus">
            <a href="#">apple</a>
        </div>
    </div>
</div>

JAVASCRIPT

var menu = ["dropmenu1", "dropmenu2"];
function dropMenu(x) {
    for (var m in menu) {
        if(menu[m] != x){
            document.getElementById(menu[m]).style.opacity = 0;
            document.getElementById(menu[m]).style.filter = 'alpha(opacity=0)';
        }
    }
    fade.init(x, 1);
}
var fade=function(){
    return{
        init:function(id, flag, target){
            this.elem = document.getElementById(id);
            clearInterval(this.elem.si);
            this.target = target ? target : flag ? 100 : 0;
            this.flag = flag || -1;
            this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
            this.elem.si = setInterval(function(){fade.tween()}, 20);
        },
        tween:function(){
            if(this.alpha == this.target){
                clearInterval(this.elem.si);
            }else{
                var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
                this.elem.style.opacity = value / 100;
                this.elem.style.filter = 'alpha(opacity=' + value + ')';
                this.alpha = value
            }
        }
    }
}();

我让你的 CSS 保持不变。对于一个有效的jsfiddle，请查看这个：

http://jsfiddle.net/XfyKZ/

你为什么不直接使用 jquery 推子呢？我已经清理了你的javascript和html。在加载文档后，我不是使用元素 onMouseover 事件，而是向该事件的该元素添加一个侦听器。

<!-- HTML -->
<div id="menus">
    <div id="parismenu">
        <a href="#" class="dropmenu" data-menu-id="#dropmenu1">Paris</a>
        <div id="dropmenu1" class="dropmenus">
            <a href="#">apple</a>
        </div>
    </div>
    <div id="disneymenu">
        <a href="#" class="dropmenu" data-menu-id="#dropmenu2">Disney</a>
        <div id="dropmenu2" class="dropmenus">
            <a href="#">apple</a>
        </div>
    </div>
</div>

然后是JavaScript：

$(function () {
    $('.dropmenu').on('mouseover', function (event) {
        $($(this).attr('data-menu-id')).fadeIn();
    });
    $('.dropmenu').on('mouseout', function (event) {
        $($(this).attr('data-menu-id')).fadeOut();
    });
});

那么你的CSS是不变的。

这是一个JSFIDDLE，显示了一个工作示例。

相关文章：