Bootstrap 3.x:display:none for accordion

时间:2015-04-26 20:51:05

标签: jquery html css html5 twitter-bootstrap

我正在尝试使用以下代码在我的网站中添加常见问题解答部分:

<div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" class="collapsed">1. What is HTML?</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                <div class="panel-body">
                    <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="collapsed" aria-expanded="false">2. What is Bootstrap?</a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" aria-expanded="false">
                <div class="panel-body">
                    <p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class="collapsed" aria-expanded="false">3. What is CSS?</a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse" aria-expanded="false">
                <div class="panel-body">
                    <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
    </div>

但我的输出显示了1个时刻然后丢失这是我从inspect元素得到的。有人可以帮助我在代码enter image description here

中注入display:none

1 个答案:

答案 0 :(得分:1)

好一些小改动,你准备好了。

1 - 删除课程&#34;折叠&#34;从你的第一个标题。 (将咏叹调变为真实)

<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" class="">1. What is HTML?</a>

2 - 在&#34;中添加课程&#34;到你的第一个面板主体容器(并从所有身体容器中移除咏叹调)

<div id="collapseOne" class="panel-collapse collapse in" style="height: 0px;">

3 - 从第一个面板主体容器中删除内联高度样式

<div id="collapseOne" class="panel-collapse collapse in">