为什么这个JS自调用函数不起作用？

Question

我正在尝试使用自动调用功能来打开和关闭菜单，但是它不起作用。

我依靠我看到的有关自调用函数的示例，但是现在我不知道出了什么问题。

我尝试了不同的语法来调用该函数，但是当我使用“ onclick =函数名”调用该功能时，什么都没有起作用，但是一切都起作用了，所以我想问题出在自调用函数上。

<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=""> &nbsp;Home</a>
    <a href="#"> <img src="img/about.png" class = "menu"  alt=""> &nbsp; About</a>
    <a href="#"><img src="img/support.png" alt="">&nbsp; Services</a>
    <a href="#"> <img src="img/contact.png" alt="">&nbsp; 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';
}

Answer 1

您会在IIFE末尾缺少() ，否则该函数将不会自行调用。 同样，您应该将函数引用传递给事件侦听器，而不是函数调用。

这是工作代码，我为btn-close添加了一些css ，以便我们进行测试。

 (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=""> &nbsp;Home</a> <a href="#"> <img src="img/about.png" class = "menu" alt=""> &nbsp; About</a> <a href="#"><img src="img/support.png" alt="">&nbsp; Services</a> <a href="#"> <img src="img/contact.png" alt="">&nbsp; Contact</a> </div> <div id="main"> <h1>Responsive Side Menu</h1> </div>

Answer 2

朋友，具有addEventListener的函数不应具有要调用的括号，而只需删除括号

答案是：

document.getElementById("btn-open").addEventListener('click', menuShow );
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';
}

为什么这个JS自调用函数不起作用？

问题描述

2 个解决方案

解决方案1
2 已采纳 2019-08-24 02:23:28

解决方案2
0 2019-08-24 02:13:55

为什么这个JS自调用函数不起作用？

问题描述

2 个解决方案

解决方案1 2 已采纳 2019-08-24 02:23:28

解决方案2 0 2019-08-24 02:13:55

解决方案1
2 已采纳 2019-08-24 02:23:28

解决方案2
0 2019-08-24 02:13:55