Bootstrap 3：默认情况下面板已折叠

Question

这是我的HTML

  <div class="panel panel-default" id="chartsPanel">
            <div class="panel-heading">
                <a data-toggle="collapse" href="#panel-charts" id="charts-title">
                    <h4>
                        Select Charts</h4>
                </a>
            </div>
            <div class="panel-body" id="panel-charts">
                <div class="nav" id="chkListCharts" data-spy="affix" data-offset-top="280">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" value="distance">
                            Distance Comparison Chart
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" value="overspeed">
                            Overspeed Chart
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" value="idle">
                            Idle/Dormant Chart
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" value="workingnonworking">
                            Working/Non-Working
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" value="workinghour">
                            Working Hours Chart
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" value="fuel">
                            Fuel Report
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" value="temperature">
                            Temperature Report
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" value="rfid">
                            RFID Report
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" value="camera">
                            Camera Report
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <a data-toggle="collapse" href="#panel-vehicles" id="vehicle-title">
                    <h4>
                        Select Vehicles</h4>
                </a>
            </div>
            <div class="panel-body" id="panel-vehicles">
                <div class="nav" id="chkListVehicles" data-spy="affix" data-offset-top="280">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox">
                            PB 35A 3467
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox">
                            PB 35A 3467
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox">
                            PB 35A 3467
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox">
                            PB 35A 3467
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox">
                            PB 35A 3467
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox">
                            PB 35A 3467
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox">
                            PB 35A 3467
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox">
                            PB 35A 3467
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox">
                            PB 35A 3467
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox">
                            PB 35A 3467
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox">
                            PB 35A 3467
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox">
                            PB 35A 3467
                        </label>
                    </div>
                </div>
            </div>
        </div>

我想将“选择图表”面板设置为默认折叠，另一个面板打开。 我试图在互联网上以及在自助站点上找到方法，但无法做到这一点..

$(document).ready(function () {
    $('#chartsPanel').collapse('hide');
});

任何帮助？

Answer 1

只需用CSS隐藏它并在某个事件上调用show（），即当你希望它出现时。

这是一个基本的例子：

<强> CSS：

#chartsPanel {
    display: none;
}

<强> jQuery的：

$(document).ready(function () {
    $( ".panel-heading" ).click(function() {
         $( "#chartsPanel" ).show();   
    });
});

<强> jsFiddle DEMO

Answer 2

CSS：

#panel-charts
{
    display:none;
}

jQuery：

$(document).ready(function () {
    $('#charts-title').click(function () {
       $('#panel-charts').toggle();
    });            
 });