Jquery隐藏大型下拉菜单

Question

我正在尝试构建一个大型下拉导航栏。 Jquery 不是我的强项，但我需要使用它来实现我正在寻找的东西。我知道关于类似问题的各种主题，但没有一个完全符合我的要求（请记住，我不是 JQuery 的专家，我只会将它用于我网站的这个小部分）。

到目前为止，我有这个 HTML 布局：

<div class = "header-wrapper">
            <div class = "header">
                <ul id = "navbar">
                    <li class = "toggle">Navbar Option 1
                        <ul class = "dropdown">
                            <li class = "dropdown-inner">
                                Dropdown 1
                            </li>
                        </ul>
                    </li>
                    <li class = "toggle">Navbar Option 2
                        <ul class = "dropdown">
                            <li class = "dropdown-inner test">
                                Dropdown 2
                            </li>
                        </ul>
                    </li>

                </ul>
            </div>
        </div>

这是我的 JQuery：

<script type="text/javascript">
            window.onload = function(){
                var $dd = $(".dropdown");

                $('.toggle').click(function() {
                    $('.toggle').not(this).children('ul').slideUp("slow");
                    $(this).children('ul').slideToggle("slow");

                });

                /* Don't hide the dropdown when clicking inside */
                $dd.on("click", function(evt) {
                    evt.stopPropagation();
                });

            } 
            </script>

我的 .dropdown div 会按预期显示和隐藏。但是我需要添加一个功能，如果在下拉菜单之外单击它会隐藏它。现在我可以收听文档上的点击事件，但是点击我的 .toggle 导航栏选项也不起作用。

因此，我想保持 .toggle 链接的功能并拥有它，这样您就可以在 .dropdown ul 内部单击而不会关闭它，但是如果您单击页面上的其他任何位置，则 .dropdown 应该是 .slideUp("slow") .

有什么帮助吗？谢谢。

Answer 1

您可以使用 jquery event.target 来检查是什么引发了该事件并可以相应地工作。类似下面的东西

   $(document).ready(function () {
    $("#navbar").click(function (event) {
        var check = $(event.target).attr('class');
        alert(check);
        if (check == 'toggle') {
            //do something
        }

        if (check == 'dropdown') {
            //do something
        }
    });
});

查看工作jsfiddle here