jquery - 折叠已展开的 div

Question

我试图在某些 div 上进行展开和折叠。但我无法让它发挥作用。我的问题是，如果元素已经展开，它不会在点击时折叠。

jQuery:

$(document).ready(function(){
$(".employee").click( function() {  
    $(".employeeInfo").hide();   
if ($(this).children(".employeeInfo").css('display') == 'none') {        
    $(this).children(".employeeInfo").show();
} else {    
       $(this).children(".employeeInfo").hide(); 
}   });})

HTML:

<div class="employee">name
<div class="employeeInfo">info etc.</div></div>

<div class="employee">name
<div class="employeeInfo">info etc.</div>

CSS:

div { 
width: 400px; 
margin-bottom: 20px; 
margin-left: 5px; 
cursor: pointer; }

div.employee{ 
background: #ccc; }

div.employeeInfo { 
margin-left: 5px; 
display: none; }

我认为问题出在这一行:

if ($(this).children(".employeeInfo").css('display') == 'none') {

Answer 1

试试这个

$(".employee").click( function() {  
    $(this).children(".employeeInfo").toggle();   
});

http://api.jquery.com/toggle/