1

次のjqueryコードプラグインがあります： 

           (function ($) {
                $.fn.extend({
                    collapsiblePanel: function () {
                        // Call the ConfigureCollapsiblePanel function for the selected element
                        return $(this).each(ConfigureCollapsiblePanel);
                    }
                });
            })(jQuery);

            function ConfigureCollapsiblePanel() {
                $(this).addClass("ui-widget");

                // Check if there are any child elements, if not then wrap the inner text within a new div.
                if ($(this).children().length == 0) {
                    $(this).wrapInner("<div></div>");
                }

                // Wrap the contents of the container within a new div.
                $(this).children().wrapAll("<div class='collapsibleContainerContent ui-widget-content'></div>");

                // Create a new div as the first item within the container.  Put the title of the panel in here.
                $("<div class='collapsibleContainerTitle ui-widget-header'><div>" + $(this).attr("title") + "</div></div>").prependTo($(this));


                // Assign a call to CollapsibleContainerTitleOnClick for the click event of the new title div.
                $(".collapsibleContainerTitle", this).click(CollapsibleContainerTitleOnClick);
            }


            function CollapsibleContainerTitleOnClick() {
                // The item clicked is the title div... get this parent (the overall container) 
                // and toggle the content within it.
                $(".collapsibleContainerContent", $(this).parent()).slideToggle();
            }

次に、html を次に示します。

<div class="collapsibleContainer" title="Example Collapsible Panel">
                                    <p>
                                        KDLorem ipsum dolor sit amet, consectetur adipiscing elit.... (you get the idea!)
                                    </p>
                                </div>

次に、css を次に示します。

.collapsibleContainer
{
}

.collapsibleContainerTitle
{
   cursor:pointer;
}

.collapsibleContainerTitle div
{
  padding-top:5px;
  padding-left:10px;
}

.collapsibleContainerContent
{
   padding: 10px;
}

ドキュメント準備完了関数は次のとおりです。 

jQuery(function () {
   jQuery(".collapsibleContainer").collapsiblePanel();
});

ドキュメントがロードされたときにパネルが展開されるのではなく、実際にドキュメントの準備ができたときにパネルを折りたたむには、何を書く必要がありますか?

4

1 に答える 1

3

パネルのコンテンツをに設定しますdisplay:none。

プラグインがを使用しているように見えます。これはslideToggle()、への/からの遷移をアニメーション化するだけdisplay:noneです。

だから、私はこれだと思います：

.collapsibleContainerContent
{
   padding: 10px;
   display: none;
}
于 2012-04-24T22:02:35.303 に答える