javascript - jQuery slideToggle() 实现的故障

Question

我遇到以下设置问题:

我在 nav 元素中有一个按钮。

<nav id="navbuttons">
    <button type = "button" id="projectsMenu" onclick="slideProjects()">Projects</button>
</nav>

单击时应滑入/滑出以下 nav 元素:

<nav id="projects">
    We're projects
</nav>

为此，我使用了以下 JavaScript/jQuery 函数:

function slideProjects(){
                $(document).ready(function(){
                        $("#projectsMenu").click(function(){
                                $("#projects").slideToggle("slow");
                        });
                });
        }

这会导致按钮和辅助导航的异常行为(其中包含的内容比“我们是项目”更多，但它们只是我所问的同一件事的示例)。必须单击该按钮两次才能显示第二个 nav，即使这样，它也会向您“眨眼”(它向下滑动，向上滑动，然后再次向下滑动，有时会多次).

据我所知/有人告诉我，我遇到这个问题是因为在这个过程中有太多的“onclick”事件处理程序，这就需要多次点击，就像我之前提到的那样。如果我从 html 元素中删除 onclick(有人告诉我它已被弃用)，它似乎不会听按钮。这是否正确，我该怎么做才能解决这个问题？

Answer 1

应该只是

<nav id="navbuttons">
    <button type="button" id="projectsMenu">Projects</button>
</nav>

然后

$(document).ready(function () {
    $("#projectsMenu").click(function () {
        $("#projects").stop(true).slideToggle("slow");
    });
});

演示:Fiddle

因为在你的情况下，实际的 slideToggle 代码不会在第一次点击时执行......在 slideProjects 方法中你正在注册一个点击处理程序，它正在滑动元素。相反，您可以只使用 dom 就绪处理程序将点击处理程序添加到 projectsMenu 元素，而无需 onclick 处理程序。