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 Navbar选项也不起作用。

因此，我希望保持.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

Jquery隐藏了巨型下拉列表

1 个答案: