Javascript 事件仅在单击两次时激活

我正在使用jQuery隐藏/显示HTML页面上的侧栏。按下

元素时，将激活

.toggle（“滑动”）

事件

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

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

我使用

.stop（）

在一次幻灯片效果后停止动画，但动画仅在用户第一次关注

元素时发生（通过单击它）。然后再次单击以触发动画（我假设）

---

因此，请告诉我如何只需单击一下即可触发动画，假设您显示的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>

---

我有点困惑为什么要在同一个元素上同时使用html

onclick

和jquery的

。click（）

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

您的html：

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

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

或者，如果需要运行
函数toggleEvent（）
，您的javascript可以如下所示：

$("#toggle-bar").click(toggleEvent);

您是否错过了JS代码中的
函数toggleEvent（）
，或者您真的将其放入了匿名对象中？谢谢兄弟。几分钟后我发布了这个。我意识到为什么我两次使用“onclick”。
$("#toggle-bar").click(toggleEvent);