Question

我的javascript存在一些问题 - 试图让它运行起来。

首先，这就是我想要做的事情：

1.)在点击

上添加/删除'active'类到父元素

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

使用toggleClass在“active”和“”
在子元素上使用stopPropagation将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();
     });

});

您可以在this fiddle

查看

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

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

3 个答案: