Question

我在外部文件navigation.js中有一个onClick函数，它包含在页面底部。这是navigation.js：

( function() {

    function openNav() {
            document.getElementById("mySidenav").style.width = "250px";
    }

    function closeNav() {
           document.getElementById("mySidenav").style.width = "0";
    }

    var open = document.getElementById("openNav");
    var close = document.getElementById("closeNav");

    open.addEventListener("click", openNav, false);
    close.addEventListener("click", closeNav, false);

} )();

这是应该发生点击事件的wordpress页面的一部分：

<div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" id="closeNav">&times;</a>
                 <?php
                    wp_nav_menu( array(
                        'theme_location' => 'menu-2',
                        'menu_id'        => 'primary-menu-bottom',
                        'walker'         => new My_Walker(),
                    ) );
                ?>
</div>
<span class="open-menu" style="font-size:30px;cursor:pointer" id="openNav">&#9776; open</span>

这实际上是汉堡菜单，当屏幕调整大小时。问题是功能不起作用。我可以从外部js文件调用onClick事件，或者我必须将它放在应该发生事件的同一页面上吗？

Answer 1

问题可能在于您如何加载脚本，因为它似乎没有任何问题。您必须确保在运行代码时，浏览器已经呈现了所有必需的DOM元素。

您可以使用window.onload处理程序（或等效的.addEventListener()）在页面完全加载后调用初始化脚本：

window.onload = function() { function openNav() { document.getElementById("mySidenav").style.width = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } var open = document.getElementById("openNav"); var close = document.getElementById("closeNav"); open.addEventListener("click", openNav, false); close.addEventListener("click", closeNav, false); };

您可以在此处查看此代码：https://jsfiddle.net/sLLLtb3x/ （请注意，我已经切换了JavaScript代码的加载方式 - 它被设置为没有包装头脑来模拟所描述的代码加载行为）。

至于在“外部脚本”中使用函数的问题 - 通常，是的，你可以这样做，但在你的情况下，你的函数包含在立即调用的函数表达式中，这会阻止你的函数泄漏到全局范围。您可以手动将它们分配给某个全局变量，也可以删除IIFE（请记住，您仍然需要onload行为）。

但正如我已经说过的那样，你的代码示例很好，因为你在代码片段中分配了事件处理程序（这很好）。

从外部js文件

1 个答案: