gpt4 book ai didi

javascript - jQuery slideToggle() 实现的故障

转载 作者:行者123 更新时间:2023-11-30 17:28:53 24 4
gpt4 key购买 nike

我遇到以下设置问题:

我在 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(有人告诉我它已被弃用),它似乎不会听按钮。这是否正确,我该怎么做才能解决这个问题?

最佳答案

应该只是

<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 处理程序。

关于javascript - jQuery slideToggle() 实现的故障,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23622261/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com