Question

好的，所以我的onClick元素出现了一个奇怪的问题。

我正在使用PHP回显一些代码，这里是：

<div class = \"dropdown\">
        <i id = \"elipses_$id\" onClick = \"dropDown_$id()\" style = \"color:#777\" class=\"fas fa-ellipsis-v\"></i>
        <div id = \"dropdown_$id\" class = \"dropdown-content\">    
                [html code here isn't relevant]
        </div>
</div>

当我打开检查元素并单击按钮时，它将输出函数名称：

当我在控制台中输入函数名称时，下拉菜单应会打开。那为什么我单击时不这样做呢？

不确定是否需要它，但这是我用来打开/关闭下拉菜单的脚本。

function dropDown_$id() {
        document.getElementById(\"dropdown_$id\").classList.toggle(\"show\");
}
window.onclick = function(event) {
        console.log(event.target);
        if (!event.target.matches('#dropdown_$id') && !event.target.matches('#elipses_$id')) {
                var dropdown = document.getElementById(\"#dropdowm_$id\");
                var c;
                if(dropdown != null){
                        for (c = 0; c < dropdown.length; c++) {
                                var openDropdowns = dropdown[c];
                                if (openDropdowns.classList.contains('show')) {
                                        openDropdowns.classList.remove('show');
                                }
                        }
                }
        }
}

编辑：这是运行PHP后吐出的下拉列表的原始HTML：

<div id="dropdown_26" class="dropdown-content"> 
        <div id="names" style="border-bottom: thin solid #BDBDBD;">
                <h2 class="dropdown-contenth2">Francois&nbsp;van&nbsp;Kempen</h2>
                <p style="color:grey;margin-top:-20px; margin-left: 16px;">@Bork_Bork</p>
        </div>
        div id="settings" style="border-bottom: thin solid #BDBDBD;">
                <a id="a1" class="dropdown-contenta" href="settings.php">Accout Settings</a>
                <form id="dark_mode_form" action="nightmode.php" method="POST" style="padding: 10px; display:flex;justify-content:flex-start;align-content:center">
                        <label style="" class="switch">
                                <input onchange="this.form.submit()" type="checkbox" name="darkmode" value="checked">
                                <span class="slider round"></span>
                        </label>
                        <p class="dropdown-contentp" style="margin:0;padding:0; margin-left:5px;margin-top:5px;">Night mode</p>
                </form>
        </div>

        <a id="a2" class="dropdown-contenta" href="logout.php">Log out @Bork_Bork</a>
        <a id="a3" class="dropdown-contenta" href="reset-password.php">Reset password @Bork_Bork</a>

</div>

编辑2：添加了原始脚本：

<script id="dropdown-settings" type="text/javascript">

    function dropDown() {
        document.getElementById("dropdown").classList.toggle("show");
    }

    function dropDown_26() {
        document.getElementById("dropdown_26").classList.toggle("show");
    }

//   Close the dropdown menu if the user clicks outside of it
    window.onclick = function(event) {
        console.log(event.target);
        if (!event.target.closest('#dropdown') && !event.target.closest('#navPFP')) {
            var dropdowns = document.getElementsByClassName("dropdown-content");
            var i;
            for (i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                }
            }
        }
        if (!event.target.matches('#dropdown_26') && !event.target.matches('#elipses_26')) {
            var dropdown = document.getElementById("#dropdowm_26");
            var c;
            if(dropdown != null){
                for (c = 0; c < dropdown.length; c++) {
                    var openDropdowns = dropdown[c];
                    if (openDropdowns.classList.contains('show')) {
                        openDropdowns.classList.remove('show');
                    }
                }
            }
        }
    }
</script>

onClick事件调用函数，但不触发

0 个答案: