如何使用JQuery隐藏/显示动态div？

Question

我有从MysqlDB子科目的主题列表。一旦我点击特定的主题，它应该显示所有的子主题。一旦我点击相同的主题，并隐藏所有子主题。

以下是$（本）我的代码以PHP

<?php 
$result = mysqli_query($con, "select * from subject"); 
while($rows = mysqli_fetch_assoc($result)) { 

    $subject_id = $rows["id"]; 
    echo "<p class='my_head'><a href='#' id=\"$subject_id\" class=\"getsubcat\">".$rows["subject_name"].'</a></p>'; 
    echo "<div id=\"div$subject_id\">"; 
    echo '</div>'; //sub categories are shown here 
}  

的JQuery/AJAX

$(document).ready(function() { 

    $(".getsubcat").click(function() { 

      var subject_id = $(this).attr("id"); 
      var divname = '#div'+subject_id; 

      $.ajax ({ 
        type: "POST", 
        url: "get_sub_subject.php", 
        data: { subject_id: subject_id }, 
        success: function(data) { 
          $(divname).html(data); 
        } 
      }); 
      } 
      return false; 
    }); 
}); 

Answer 1

$(document).ready(function() { 
    var i = 0; 
    $(".getsubcat").click(function() { 

     var subject_id = $(this).attr("id"); 
     var divname = '#div'+subject_id; 
     if(i){ 
      $(divname).html(''); 
      i=0; 
     }else{ 
      $.ajax ({ 
       type: "POST", 
       url: "get_sub_subject.php", 
       data: { subject_id: subject_id }, 
       success: function(data) { 
         $(divname).html(data); 
       } 
      }); 
      i=1; 
     }    
     return false; 
    }); 
});