jquery - 在从其中删除所有动态数据后，滑动一个 div，jquery

Question

我有一个应用程序，用户在其中将关键字添加到 div。他们可以根据需要添加/删除关键字。当他们添加第一个关键字时，一个 div 使用 slideToggle 打开 div 并显示第一个关键字。这些关键字被添加到一个数组中。当他们点击 x 图形时，我使用 livequery 插件删除关键字 div。我遇到的问题是当最后一个关键字被删除（基于数组长度为 0）时，我希望 div 再次使用 slideToggle 来关闭 div。这不适用于我当前的代码。

    //Here's my jquery
    $(document).ready(function () {
        //number of keywords
        var numkw = 0;
        //keyword array
        var keywords = [];
        //ouput of array
        var output = "";
        //hide the div that holds the keywords
        $("div#KeywordHolder").hide();


        //When the Add keyword button clicked 
        $("#nihSearch_btnSearch").click(function () {
            //value of textbox
            var currentkeyword = $("#nihSearch_txtSearch").val();
            //if numkw is 0 slide open the keyword holder
            if (keywords.length == 0) {
                keywords.push(currentkeyword);
                //slide open keywordHolder
                $("div#KeywordHolder").slideToggle("slow", function () {
                    $("div#KeywordHolder").delay(2000, function () {
                        //add first tab to keys div and fade it in
                        $("div#keys").append("" + currentkeyword + " ");
                        var lastid = $("div#keys .tab:last").attr("id");
                        $("div#keys").fadeIn(1000);
                    });

                });



            }
            //otherwise add the tab and keyword to the array
            else {
                keywords.push(currentkeyword);
                $("div.tab:last").after("" + currentkeyword + " ", function () {
                    $(this).fadeIn(1000);
                });
                var lastid = $("div#keys .tab:last").attr("id");
            }

        });

        //When get resources button clicked show current array values
        $("#nihSearch_btnResults").click(function () {
            output = "";
            //as a test output all array values into a message box
            $.each(keywords, function (i, l) {
                output += l + " ";
            });

            alert(output);
        });


        //Tab x clicked
        $('#keys', 'body')
            .find('a.xclick')
                .livequery('click', function () {
                    //gets the id of the tab clicked on
                    var getid = $(this).parent().attr("id");
                    //gets the number of the tab from the id value
                    var numid = parseInt(getid.replace(/\D/g, ''), 10);
                    $(this).parent("div").remove();
                    keywords.splice((numid - 1), 1);
                    alert("Length: " + keywords.length);
                    if (keywords.length == 0) {
                        alert("In the if statement");                   
                        $("div#KeywordHolder").slideToggle("slow");
                    }
                    return false;
                });


    });

    //code for autocomplete textbox

    $(function () {
        var availableTags = [
                "ActionScript",
                "AppleScript",
                "Asp",
                "BASIC",
                "C",
                "C++",
                "Clojure",
                "COBOL",
                "ColdFusion",
                "Erlang",
                "Fortran",
                "Groovy",
                "Haskell",
                "Java",
                "JavaScript",
                "Lisp",
                "Perl",
                "PHP",
                "Python",
                "Ruby",
                "Scala",
                "Scheme"
            ];
        $(".homeSearchBox").autocomplete({
            source: availableTags
        });
    });

    // code for drop down

    (function ($) {
        $(function () {
            $('#combolist').combobox();

        });
    })(jQuery);

<!-- Here's my html -->

<div class="ui-widget">
                                <asp:TextBox ID="txtSearch" placeholder="Enter Keywords..." columns="25" CssClass="homeSearchBox" runat="server"></asp:TextBox>

                                 <asp:Button ID="btnSearch" CssClass="searchButton" runat="server" 
                                Text="Add Keyword" UseSubmitBehavior="False" />
                            </div>

                            <div id="KeywordHolder">
                                <div id="keys">
                                    <!-- <div class='tab'><span>test tab</span><a href='#' class='xclick' />Close</a></div> -->
                                </div>
                                <br class="clear" />  
                                <div class="rightdiv">
                                    <asp:Button ID="btnResults" CssClass="searchButton" runat="server" 
                                    Text="Find Resources" UseSubmitBehavior="False" />
                                </div>                         
                            </div>