Javascript 我不断收到未捕获的引用错误：未定义dropMenu，未捕获的TypeError:无法读取属性'；风格'；空的

我试图使导航栏与子菜单，但我一直得到dropMenu没有定义，当我悬停在两个巴黎链接我得到未捕获的TypeError：无法读取属性'style'的null任何想法是什么造成的 这是我的密码 html

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)}}

---

为什么不直接使用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>

那么你的CSS是不变的

---

下面是一个工作示例。

您的数组包含三个ID，而您的html只包含前两个ID-so

document.getElementById(menu[m])

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

因此，您需要从菜单数组中删除“dropmenu3”

此外，这一行：

this.elem=document.ElementById(id);

应该是

this.elem=document.getElementById(id);

---

如果您想在不使用jquery的情况下完成此操作，请参阅下面的代码。您的原始javascript中有几个拼写错误。我还更改了if，以便所有未悬停的元素立即隐藏

HTML

我没有改变你的CSS。对于一个工作的JSFIDLE，请查看以下内容：

---

这可能是因为脚本标记位于结束正文标记之后。试着把它们放在iti之前。我现在只得到null错误的样式。id为dropmenu3或以上的元素在哪里？代码只是一个示例？这是一个示例我只有两个DropMenuThat，因为您的getElementById缺少id的哈希标记。您可能需要document.getElementById（'#'+菜单[m]）。style.display=“无”；我想做香草javascript谢谢你的帮助，但是如果在哪里做我怎么做是什么导致了空错误的风格，或者有没有更好的方法只使用香草javascript下次你应该为此设置一个小提琴-你粘贴的淡入淡出功能中有很多错误；我想我已经把它们都修好了——请看（注意，我只绑定了第二个链接，并且使用了一些jQuery，但是您应该可以从那里开始使用它）您还应该学习如何使用浏览器的调试器查看错误发生的位置-也许可以看看这是我如何知道错误的，我应该也添加错误发生的位置谢谢现在我可以添加onmouseover where fade.init（X，1）如果你不想隐藏打开的菜单，那么你可以用fade.init（'dropmenu1'，1）替换它。我可以调用onmouseout，让菜单在你不悬停在巴黎时不显示吗？这对所有你可以添加的菜单都是好的，如果我的任何一个答案正确，如果你能将其标记为已接受，我们将不胜感激。

document.getElementById(menu[m])

this.elem=document.ElementById(id);

this.elem=document.getElementById(id);

<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>

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
            }
        }
    }
}();