如何使用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;
    });
});