事件仅在点击两次时激活

问题描述：

我正在使用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>元件上（通过点击它）。然后再次点击触发的动画（I”中号假设）

那么，请告诉我如何只有在点击

你已经错过了'函数toggleEvent（）'从你的JS代码，或者你真的把它放在一个匿名对象？ –

答

我有点困惑，为什么你正在使用的HTML onclick和jQuery的.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);

谢谢兄弟。几分钟后，我张贴这个。我意识到为什么我使用了两次“onclick”。 –

答

假设你已经证明了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. 
    }); 
});

事件仅在点击两次时激活

相关推荐