如何在默认情况下使此portlet折叠？

Question

我使用了以下portlet代码。但是，它显示为展开。如何(默认情况下)将其显示为折叠？

<div id="myPortlet" data-pages="portlet" class="panel panel-default">
    <div class="panel-heading ">
        <div class="panel-title">Portlet Title
        </div>
        <div class="panel-controls">
            <ul>
                <li><a href="#" class="portlet-collapse" data-toggle="collapse"><i class="portlet-icon portlet-icon-collapse"></i></a>
                </li>
            </ul>
        </div>
    </div>
    <div class="panel-body">
        ...
    </div>
</div>

Answer 1

将类panel-collapsed添加到外部div

<div id="myPortlet" data-pages="portlet" class="panel panel-default panel-collapsed">

并在您的CSS中添加以下规则

.panel-collapsed > .panel-body{
    display: none
}

Answer 2

将此style="display: none;"添加到portlet-body行，并更改折叠锚点

<div id="myPortlet" data-pages="portlet" class="panel panel-default">
    <div class="panel-heading ">
        <div class="panel-title">Portlet Title
        </div>
        <div class="panel-controls">
            <ul>
                <li>
                    <a href="javascript:;" class="expand" data-original-title="" title=""></a>
                </li>
            </ul>
        </div>
    </div>
    <div class="panel-body" style="display:none;">
        ...
    </div>
</div>