Jquery 切換觸發多次

Question

jQuery 相當新。 按照各種文本和教程，我試圖了解如何讓切換 function 像上述教程中所示那樣工作。 然而，我遇到了多次被解雇的問題。

$document.ready(function() {
  $(#myButtonId).click(function() {
  $(#myDivId).toggle(
     function() {
       $(this).addClass("myClass");
       $(this).next().show(); },
     function() {
       $(this).removeClass("myClass");
       $(this).next().hide(); } 
);
});
}); 

這是我目前的理解，上面應該點擊按鈕，打開/顯示div並將class“myClass”添加到div“myDivId”。 然后，再次單擊按鈕時，應關閉/隱藏 div 並從 div 中刪除 class。

但是，不知何故，它要么只調用了兩個切換函數中的一個，而且多次調用它。

Answer 1

所以，假設你的 HTML 中有一個這樣的按鈕和 div：

<button id="myButtonId">Button</button>
<div id="myDivId" class="myClass">Div that toggles</div>

您可以在 javascript 文件中執行以下操作：

jQuery(document).ready(function($)
{
    $('#myButtonId').click(function()
    {
        $('#myDivId').slideToggle(400, function()
            {
                if($(this).is(':visible'))
                { $(this).addClass('myClass'); }
                else
                { $(this).removeClass('myClass'); }
            }
        );
    });
});

解釋這段代碼：

• 文件准備好后
• 我們觀察#myButtonId 按鈕上的任何點擊事件
• 單擊#myButtonId 按鈕將以400 毫秒（0.4 秒）的速度切換#myDivId div。 此 slideToggle function 的第二個參數是“回調”，它基本上定義了切換 animation 完成后您想要做什么
• 在回調中，我們查看切換的元素（在本例中為#myDivId）是否可見。 如果可見，我們添加 'myClass' class，否則我們刪除 class

我不確定你想用 $(this).next().hide(); 做什么和 $(this).next().show(); 不過，這似乎與問題無關，如果需要，您可以將它們放回“如果可見”狀態。 :-)