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

将此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>

Answer 2

将班级panel-collapsed添加到外部div

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

并在CSS中添加以下规则

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

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

2 个答案: