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

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

以下是所有这三点的答案：

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在“active”和“”之间切换

2. 在子元素上使用stopPropagation将click事件放在其上，并阻止它将事件“传播”到其父元素

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

Answer 2

当用户点击父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();
     });

});

你可以在这个小提琴上看看

Answer 3

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