KendoUI 折叠

折叠

by JSDavi

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.626/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.626/styles/kendo.flat.min.css">
<script src="http://cdn.kendostatic.com/2013.2.626/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://www.see-source.com/bootstrap/css/bootstrap.css">
<script src="http://www.see-source.com/bootstrap/js/jquery.js"></script>
<script src="http://www.see-source.com/bootstrap/js/bootstrap-collapse.js"></script>
<script src="http://www.see-source.com/bootstrap/js/bootstrap-transition.js"></script>
<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading"> <a class="accordion-toggle">
                  国土问题
                </a>

        </div>
        <div class="accordion-body collapse" style="height: 0px;">
            <div class="accordion-inner">前一段时间一个段子说，某国的网民在因国土问题与中国网民争吵时说，我要打到北京，中国的网民非常淡然地回应，就你那经济水平，交得起过路费吗？这两天新的段子说，李白要是活在今天的话，估计一大半以上他的诗根本写不出来，因为名山大川的门票他根本买不起。</div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading"> 
            <a class="accordion-toggle">
                  门票问题
            </a>
        </div>
        <div class="accordion-body collapse" style="height: 0px;">
            <div class="accordion-inner">目前，中国半数5A级景区门票达到100元，黄山门票10年来由80元涨至230元。山东曲阜称，与同类景区相比收费较低，仅收150元，不涨票价就丢身价。曲阜的孔庙、孔府和孔林，年收入1.5亿元左右，全部上缴了地方财政，但景区维护成本从未公开。</div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading"> <a class="accordion-toggle">
                  超生罚款
                </a>

        </div>
        <div class="accordion-body in" style="height: auto;">
            <div class="accordion-inner">学者杨支柱因生二胎被取消公职，并罚款24万余元。他称，计生罚款以前直接叫超生罚款，入世后改成“社会抚养费”。根据9省市超生罚款的平均数，全国31个省市每年征收的超生罚款可高达279亿元。其中大城市将该收入上缴财政，而地方则分配混乱，部分罚款去向成谜。</div>
        </div>
    </div>
</div>

JavaScript

//创建折叠组件
$(".accordion-body").collapse({
    toggle: true,
    parent: '#accordion2'
});
//为触发元素添加单击事件，在回调函数里打开折叠元素，此时由于上面已经指定了parent属性，所以Bootstrap会为我们自动将其他折叠组件关闭
$('.accordion-heading').on('click', function () {
    var self = this;
    $(self).nextAll().eq(0).collapse("show");
    alert("123");
})