單擊時在父元素上添加/刪除活動類

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」綁定的點擊事件