Javascript 切换功能需要两次单击

我正在实现一个菜单，它将显示在滚动条上。它有两个

元素和切换功能。除了开关需要两次轻触才能激活触摸设备上的开关外，它工作得很好。我尝试添加

返回false或
e.preventDefault（）但它没有解决它。有人能帮忙吗？以下是我的JS代码：


功能切换\u可见性（id）{
var e=document.getElementById（id）；
var allDivs=document.querySelectorAll（'div[id^=mega]'）；
[]forEach.call（allDivs，function（div）{
如果（div！=e）{
div.style.display='none'；
}
否则{
e、 style.display=e.style.display=='none'？'block'：'none'；
}
});    
}
.menubar{
位置：固定；
顶部：0px；
高度：51px；
宽度：295px；
z指数：69；
背景色：#FFF；
利润上限：-100px；
-moz盒阴影：02px2prgba（0,0,0,0.2）；
-webkit盒阴影：0 2px2pRGBA（0,0,0,0.2）；
盒影：0.2px2pRGBA（0,0,0,0.2）；
}
a、 子类别粘性菜单{
颜色：#323470！重要；
字体大小：14px！重要；
}
ul.show-all-matters-sticky-menu{
宽度：7%！重要；
右边距：0px！重要；
左边距：-8%！重要；
}
#包装纸{
宽度：294px；
最小高度：600px；
保证金：0自动；
}
导航{
位置：相对位置；
宽度：294px；
高度：51px；
保证金：0自动；
背景：#323470；
}
导航{
显示：块；
}
导航菜单{
显示：块；
保证金：0；
填充：0；
列表样式：0；
} 
导航ul#菜单li{
位置：相对位置；
显示：内联块；
}
导航ul#菜单li a{
显示：块；
高度：50px；
字号：18px；
线高：50px；
颜色：#fff；
文字装饰：无；
填充：0px 22px；
}
导航ul#菜单li a:悬停，导航ul#菜单li:悬停>a{
背景：#323470；
}
导航ul#菜单li：悬停>#巨型{
显示：块；
}
导航ul#菜单li：悬停>#mega2{
显示：块；
}
#巨大的{
位置：绝对位置；
最高：100%；
左：0；
宽度：920px；
高度：自动；
填充：5px0px 0px 20px；
背景：#dad7d6；
显示：无；
}
#mega2{
位置：绝对位置；
最高：100%；
左：0；
宽度：920px；
高度：自动；
填充：5px0px 0px 20px；
背景：#dad7d6；
显示：无；
}
ul#菜单ul{
浮动：左；
宽度：23%；
利润率：02%15px0；
填充：0；
列表样式：无；
}
ul#菜单ul li{
显示：块；
}
菜单菜单{
浮动：左；
显示：块；
宽度：100%；
高度：自动；
线高：1.3em；
颜色：828180；
文字装饰：无；
填充：6px0；
}
/*菜单：第一个孩子a{
字体大小：1.2米；
颜色：828180；
}*/
菜单：第一个孩子a{
字体大小：16px；
颜色：#4a4949；
字体大小：粗体；
字体：16px/1.2“未来之书”，Arial，Helvetica，无衬线；
/*边框底部：1px#4a4949实心*/
}
菜单ul li a：悬停{
颜色：828180；
背景：无；
}
菜单ul li:第一个孩子a:悬停{
颜色：828180；
}
/*clearfix*/
海军ul：之后{
内容：“.”；
显示：块；
明确：两者皆有；
可见性：隐藏；
线高：0；
身高：0；
}
导航ul{
显示：内联块；
} 
html[xmlns]nav ul{
显示：块；
}
*html导航{
身高：1%；
}
#内容{
填充：30px0；
}












































































页面加载时未设置样式属性，因此它将作为空字符串返回。请尝试以下操作：

function toggle_visibility(id) {
    var e = document.getElementById(id);   
    var allDivs = document.querySelectorAll('div[id^=mega]');

    [].forEach.call(allDivs, function(div) { 

        if (div != e)
        {
            div.style.display = 'none';

        } else {
            e.style.display = (e.style.display == 'none' || e.style.display === '') ? 'block' : 'none';
              }
    });

}

页面加载时未设置style属性，因此它将作为空字符串返回。请尝试以下操作：

function toggle_visibility(id) {
    var e = document.getElementById(id);   
    var allDivs = document.querySelectorAll('div[id^=mega]');

    [].forEach.call(allDivs, function(div) { 

        if (div != e)
        {
            div.style.display = 'none';

        } else {
            e.style.display = (e.style.display == 'none' || e.style.display === '') ? 'block' : 'none';
              }
    });

}

当你的问题中没有一点jquery代码时，为什么要标记
jquery
？当你的问题中没有一点jquery代码时，为什么要标记
jquery
？这似乎解决了我的问题。万分感谢你是绝对的明星！这似乎解决了我的问题。万分感谢你是绝对的明星！