事件仅在单击两次时激活

Event only activate when clicked twice

本文关键字：两次 激活 单击 事件      更新时间：2023-09-26

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

<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>元素（通过单击它）时发生。

所以，请告诉我如何一键触发动画

假设你展示的 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.
    });
});

我有点困惑为什么你在同一元素上一起使用html onclick和jquery的.click()。

我建议从 html 中删除onclick并删除.stop()调用，这样您的动画就会被调用一次，而不是两次。正如其他评论所提到的，最好知道function toggleEvent()是什么，以便我们可以提供更准确的答案。

您的网页：

<div class="sidebar" id="SideBar"></div>
<!-- elsewhere in code... -->
<li style="//Styling li Button." id="toggle-bar">toggle bar</li>

你的JavaScript：

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

或者，如果您需要运行function toggleEvent()，您的 JavaScript 可能如下所示：

$("#toggle-bar").click(toggleEvent);
相关文章：