JQUERY：我怎麼知道這個元素當前是打開/關閉的（slidetoggle）

Question

我使用以下內容打開/關閉div

$(".alerts").click(function(){ 

    $(this).toggleClass("active").next().slideToggle(50); 

但是我想要一個特定的功能只有在盒子關閉並被打開時纔會觸發，我該如何判斷呢？我不想使用cookie或

這樣的東西謝謝！

Answer 1

您可以使用所述visible選擇與is方法這樣的 -

$(document).ready(function() 
{ 
    $(".alerts").click(function() 
    {   
     if($(this).toggleClass("active").next().is(":visible")) 
      alert("It's visible"); 

     $(this).toggleClass("active").next().slideToggle(50); 
    }); 
}); 

01上的例子。

的 -

if($(this).toggleClass("active").next().is(":visible")) 
    alert("It's visible"); 

部檢查是否的this下一個元素是可見或不可見。如果是，那麼它返回true。結果，alert方法得到執行。

Here是visible選擇器的文檔，here是is()方法的文檔。

Answer 2

您可以添加一個類div和檢查它與hasClass()：

$('.alerts').live('click', function() { 
    if($(this).hasClass('active')) //close 
     $(this).removeClass('active').next().slideUp(50); 
    else //open 
     $(this).addClass('active').next().slideDown(50); 
}); 

當已被改變的Javascript DOM元素/屬性檢查，用live()而不是如click()。

如果您.alerts元素有不同的CSS樣式時，它具有.active類，你應該運行addClass()和removeClass()功能後的幻燈片事件已經完成，像這樣：

//same thing, but wait for animation to complete 
$('.alerts').live('click', function() { 
    var thisbtn = $(this); 
    if(thisbtn.hasClass('active')) { //close 
     thisbtn.next().slideUp(50, function() { 
     thisbtn.removeClass('active'); 
     }); 
    } else { //open 
     thisbtn.next().slideDown(50, function() { 
     thisbtn.addClass('active'); 
     }); 
    } 
});