JQUERY：我怎么知道这个元素当前是打开/关闭的（slidetoggle）

Question

我使用以下内容打开/关闭div

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

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

但我想要一个特定的功能只有在盒子关闭并被打开时触发，我该如何判断？我不想使用cookies或类似的东西

谢谢！

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

关于jsfiddle的一个例子。

-

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元素在具有.active类时具有不同的CSS样式，则应在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');
      });
   }
});