改变bootstrap手风琴面板的宽度(折叠元素)

时间:2016-08-12 10:58:25

标签: javascript jquery html css twitter-bootstrap

在我的代码中我有经典的bootstrap手风琴Accordion,我想在点击时改变扩展的ul / li的宽度(减小宽度),现在有一个全宽的h5,任何人都可以帮忙吗?

<div class="panel-group" id="accordion">

                <div class="panel" >
                    <a data-toggle="collapse" data-parent="#accordion" href="#divListCiagniki">
                        <h5>ciągniki</h5>
                    </a>
                    <div id="divListCiagniki" class="panel-collapse collapse" style="width:50%">

                            <ul class="panel-body" >
                                <li>example</li>
                                <li>example</li>
                                <li>example</li>
                            </ul>

                    </div>
                </div>

                <div class="panel">
                    <a data-toggle="collapse" data-parent="#accordion" href="#divListMaszynyRolnicze">
                        <h5>maszyny rolnicze</h5>
                    </a>
                    <div id="divListMaszynyRolnicze" class="panel-collapse collapse ">
                        <div class="panel-body">
                            <ul>
                                <li>example</li>
                                <li>example</li>
                                <li>example</li>
                                <li>example</li>
                                <li>example</li>
                                <li>example</li>
                                <li>example</li>
                                <li>example</li>
                            </ul>
                        </div>
                    </div>
                </div>

3 个答案:

答案 0 :(得分:0)

我建议使用这样的东西:

li:active { 
    width: 80% !imporant;
}

记得使用!important覆盖引导样式

答案 1 :(得分:0)

如果你需要减小ul / li标签的宽度, 使用

<div id="divListCiagniki" class="panel-collapse collapse"  style="width:<Required width>; overflow:hidden;">

// overflow:hidden隐藏超出宽度的文本。

答案 2 :(得分:0)

我的意思是更改div id的宽度:divListCiagniki或divListMaszynyRolnicze但不满意以上两种技巧都不起作用