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

【问题标题】：add/remove active class on parent element when clicked单击时在父元素上添加/删除活动类
【发布时间】：2014-01-16 01:40:28
【问题描述】：

我的 javascript 有一些问题 - 试图让它工作。

首先，这是我想要做的：

1.)点击时向父元素添加/删除“活动”类

2.) 在子元素上时，在子元素内部的任何点击都会使其关闭 - 需要帮助才能让它不这样做...如果在子元素内部进行任何点击，它需要保持打开状态而不是关闭起来……

3.) 除了点击父元素打开/关闭子元素，有没有办法允许点击页面任意位置关闭子元素，而不是只点击父元素关闭子元素?

JS：

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

要查看我目前的行动，FIDDLE ME DEMO

任何帮助将不胜感激！

【问题讨论】：

是的，这一切皆有可能。给我一点时间来构建一个小提琴。
否则不会导致您找到答案。干得好@user3043124
感谢您有兴趣帮助 Nicholas -

标签： javascript jquery html css

【解决方案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();
   });
});

使用 toggleClass 在“活动”和“”之间切换
在子元素上使用 stopPropagation 将点击事件放在它上面，并阻止它将事件“传播”到其父元素
要在页面上的任意位置单击以打开/关闭子项，只需将单击事件绑定到“html”

【讨论】：

谢谢！这正是我想要的。

【解决方案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();
     });

});

您可以在this fiddle查看它

【讨论】：

完美！这正是我所需要的。我最终在我选择为正确的那个上遇到了 1 个小障碍，但这个适合一切 - 非常感谢！

【解决方案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');
}
});

【讨论】：