单击时在父元素上添加/删除活动类

Question

我遇到了一些与我的JavaScript问题 - 试图让这个工作。

首先，这里是什么，我想这样做：

1.)添加/删除“主动”类的父元素上点击

2.)当子元素，子元素内的任何点击上使它关闭 - 需要帮助，使它不这样做...如果任何点击是在子元素内部，它需要保持打开，并没有关闭...

3.)除了点击父元素打开/关闭子元素，有没有办法允许点击一个在页面上关闭子元素而不是只点击父元素关闭子元素？

JS：

$(document).ready(function() { 
    $("#logsterIn_profile").click(function() { 
     $(".logsterIn_profile").slideToggle('200'); 
     $("#logsterIn_profile").addClass('active'); 
    }); 
}); 

，看看我目前在采取行动，FIDDLE ME DEMO

任何帮助，将不胜感激！

Answer 1

您是否希望div在用户在父div之外单击时打开并关闭？

通过您的描述，您听起来像只想要div关闭，但如果用户在外面点击则无法打开。如果是这样的话，你需要检查，如果孩子是打开或当用户点击父外封闭，具体如下：

$(document).ready(function() { 

    $("html").click(function(e) { 
     if (e.target == document.getElementById("logsterIn_profile")){ 
      $(".logsterIn_profile").slideToggle('200'); 
      $("#logsterIn_profile").toggleClass('active'); 
     }else{ 
      if($("#logsterIn_profile").hasClass('active')){ 
       $(".logsterIn_profile").slideToggle('200'); 
       $("#logsterIn_profile").toggleClass('active'); 
      } 
     } 
    }); 

    $(".logsterIn_profile").click(function(event) { 
     event.stopPropagation(); 
    }); 

}); 

您可以在this fiddle

Answer 2

http://jsfiddle.net/AzSXL/8/

$(document).ready(function() { 
$("#logsterIn_profile").click(function() { 
    $("#logsterIn_profile").toggleClass('active'); 
    $(".logsterIn_profile").slideToggle('200'); 
}); 
$(".logsterIn_profile").bind('click',function(e) { 
    e.stopPropagation(); 
}); 
$("html").click(function() { 
    $("#logsterIn_profile").toggleClass('active'); 
    $(".logsterIn_profile").slideToggle('200'); 
} 
}); 

Answer 3

这里的答案，所有的三点：

http://jsfiddle.net/vnny7/

$(document).ready(function() { 
    $("html").click(function() { 
     $(".logsterIn_profile").slideToggle('200'); 
     $("#logsterIn_profile").toggleClass('active'); 
    }); 
    $(".logsterIn_profile").click(function(event) { 
     event.stopPropagation(); 
    }); 
}); 

1. 使用toggleClass为 “积极” 和 “”

2. 之间去

   在子元素上使用stopPropagation将其上的点击事件，并阻止它将事件“传播”至其父项

3. 在页面上的任何位置点击以打开/关闭子项，只需与“html”绑定的点击事件