Question

我正在使用jQuery隐藏/显示我的HTML页面上的侧边栏。 <{1}}事件将在按下.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()元素（通过点击它）时发生。然后再次点击以触发动画（I假设）

所以，请告诉我如何只需点击一下即可触发动画

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.
    });
});

Answer 2

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

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

你的HTML：

<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);

事件仅在单击两次时激活

2 个答案: