Question

我正在尝试在导航栏上添加多个下拉菜单。我想让它们弹出和弹出的函数是通用的，而不是为每个下拉列表创建一个函数。

我尝试执行以下操作以将其弹出：

<script>
document.addEventListener("click", function(e){
    var elem = e.target;
    if(document.getElementById(elem.id).className == ".dropdown-trigger .dropdown-toggle")
    {
        var parent = document.getElementById(elem.id).parentNode;
        var children = document.getElementById(parent.id).children;
        if(e.target == children[0])
        children[1].style.display="block";
    }
});
</script>

而children [0]是指下拉标签，而children [1]是指隐藏的下拉菜单本身。

这是前端html：

          <li class="dropdown-container dropdown-right rightside dropdown-down" data-skip-responsive="true">
                    <a href="#" class="dropdown-trigger dropdown-toggle">Server</a>
                    <div class="dropdown hidden" style="display: none; margin-right: -3151.05px;">
                        <div class="pointer"><div class="pointer-inner"></div></div>
                        <ul class="dropdown-contents dropdown-nonscroll" style="margin-left: 0px; left: 0px; max-width: 1899px;">
                            <li class="font-icon"><a target="_blank" href="#test"><i class="fa fa-wrench"></i> Control Panel</a></li>
                            <li class="font-icon"><a target="_blank" href="#test"><i class="fa fa-wechat"></i> Chat</a></li>
                            <li class="separator"></li>
                            <li class="font-icon"><a target="_blank" href="#test"><i class="fa fa-user"></i> Administrators</a></li>
                            <li class="font-icon"><a target="_blank" href="#test"><i class="fa fa-support"></i> Helpers</a></li>
                        </ul>
                    </div>
                </li>

但是它不起作用。任何人都可以看到问题出在哪里吗？

访问子节点以隐藏/显示下拉菜单

0 个答案: