javascript - 事件仅在单击两次时激活

Question

我正在使用 jQuery 在我的 HTML 页面上隐藏/显示侧边栏。 .toggle("slide")事件将在 <li> 时激活元素被按下。

<div class="sidebar" id="SideBar"></div>

<!-- elsewhere in code... -->
<li style="//Styling li Button." id="toggle-bar" onclick="toggleEvent();">toggle bar</li>

{
    $("#toggle-bar").click(function(){
        $("#SideBar").stop().toggle("slide"); // for left to right slide.
    });
}

我用了.stop()在一个幻灯片效果后停止动画，但动画仅在用户首次关注 <li> 时发生元素(通过单击它)。然后再次单击以触发动画(我假设)

所以，请告诉我如何只点击一次触发动画

Answer 1

假设你展示的JS代码是toggleEvent()函数的代码块，如下所示:

function toggleEvent() {
    $("#toggle-bar").click(function(){
        $("#SideBar").stop().toggle("slide"); // for left to right slide.
    });
}

问题在于，在第一次单击元素时，您附加了事件处理程序。然后在后续的点击中附加另一个事件处理程序，并运行之前的任何事件处理程序。这就是为什么它只在第一次点击后才起作用。

要实现您的要求，您可以完全删除 onclick 属性并通过 JS 直接附加您的事件处理程序。试试这个:

<li style="" id="toggle-bar">toggle bar</li>

$(function() {
    $("#toggle-bar").click(function(){
        $("#SideBar").stop().toggle("slide"); // for left to right slide.
    });
});