僅在單擊兩次時才激活事件

Question

我正在使用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>元素上時（通過單擊它）發生，然后再次單擊以觸發動畫（我假設）

所以，請告訴我如何一鍵觸發動畫

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