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末尾缺少()，否则该函数将不会自行调用。另外，您应该将函数引用传递给事件侦听器，而不是函数调用。

这是工作代码，我为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=""> &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 个答案: