我正在尝试使用自动自调用函数来打开和关闭菜单，但它不起作用。
我依赖于我看到的有关自调用函数的示例，但现在我不知道出了什么问题。
我尝试了不同的语法来调用该函数，但没有任何效果，但是当我使用“onclick=function name”调用函数时一切正常，所以我猜问题出在自调用函数上。
<body>
<nav class="navbar">
<span class="open-slide" >
<a href="#">
<img src="img/menu.png" id="btn-open">
</a>
</span>
<h1 id="t1">Innova<span id="t2">TEK</span> </h1>
</nav>
<div id="side-menu" class="side-nav">
<a href="#" class="btn-close">
<img src="img/back.png" alt="" id="btn-close"></a>
<a href="#"><img i class = "menu"src="img/home.png" alt=""> Home</a>
<a href="#"> <img src="img/about.png" class = "menu" alt=""> About</a>
<a href="#"><img src="img/support.png" alt=""> Services</a>
<a href="#"> <img src="img/contact.png" alt=""> Contact</a>
</div>
<div id="main">
<h1>Responsive Side Menu</h1>
</div>
(function(){
show();
hide();
});
function show(){
document.getElementById("btn-open").addEventListener('click', menuShow());
}
function hide(){
document.getElementById("btn-close").addEventListener("click", menuHide());
}
function menuShow(){
document.getElementById('side-menu').style.width = '17%';
document.getElementById('main').style.marginLeft = '17%';
}
function menuHide(){
document.getElementById('side-menu').style.width = '0';
document.getElementById('main').style.marginLeft = '0';
}
您错过了()IIFE 末尾的 ，否则该函数将不会调用自身。此外，您应该将函数引用传递给事件侦听器，而不是函数调用。
这是工作代码，我css为btn-close它添加了一些代码，以便我们可以看到它进行测试。
(function(){
show();
hide();
})(); // <--- were missing the () here
function show(){
document.getElementById("btn-open").addEventListener('click', menuShow);
}
function hide(){
document.getElementById("btn-close").addEventListener("click", menuHide);
}
function menuShow(){
document.getElementById('side-menu').style.width = '17%';
document.getElementById('main').style.marginLeft = '17%';
}
function menuHide(){
document.getElementById('side-menu').style.width = '0';
document.getElementById('main').style.marginLeft = '0';
}#btn-close {
position:relative;
float:left;
height:20px;
width: 20px;
border: 1px solid #f00;
}<nav class="navbar">
<span class="open-slide" >
<a href="#">
<img src="img/menu.png" id="btn-open">
</a>
</span>
<h1 id="t1">Innova<span id="t2">TEK</span> </h1>
</nav>
<div id="side-menu" class="side-nav">
<a href="#" class="btn-close">
<img src="img/back.png" alt="" id="btn-close"></a>
<br style="clear:both" />
<a href="#"><img i class = "menu"src="img/home.png" alt=""> Home</a>
<a href="#"> <img src="img/about.png" class = "menu" alt=""> About</a>
<a href="#"><img src="img/support.png" alt=""> Services</a>
<a href="#"> <img src="img/contact.png" alt=""> Contact</a>
</div>
<div id="main">
<h1>Responsive Side Menu</h1>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句