Question

我正在尝试创建一个折叠菜单，但是我的所有菜单都默认显示。它不会崩溃或提供单击/关闭选项。这是我用于菜单的代码（有3个问题）

以下是整个页面的要点 - https://gist.github.com/d01cbfefac2c62ed9eb1

<div class="header">
  <h1>Frequently Asked Questions</h1>
  <div class="panel-group" id="accordion" role="tablist" aria-multislectable="true">
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingOne">
        <h4 class="panel-title">
          <a role "button" data-toggle="collapse" data-parent="#accordian" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><span class= "glyphicon glyphicon-pushpin"></span>
            Why did you become a developer?
          </a>
        </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
          I became a web developer to gain a unique perspective on education reform. I believe that the only way to have reform in education is if students are ready for future jobs and what made sense to me was having students who understood computer languages. This means that I have to learn to code in order to teach how to code.
        </div>
      </div>
    </div>

Answer 1

很多注意错误：instruction，working demo

1）。 html标签没有关闭 - 没有外部div，body，html关闭 2）。 div class =“panel-group”id =“accordion”应该只放一次 - 这是手风琴的包装。

3）。 data-parent =“＃accordion”not data-parent =“＃accordian”

4）。在第一个节目中要隐藏的面板上 - 删除“in”类并将类“折叠”放在面板的链接上

 <h4 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class= "glyphicon glyphicon-pushpin"></span> How do you do it all, and with such great hair!? </a></h4>
        </div>
        <div id="collapseFour" class="panel-collapse collapse">

5）。 http://prntscr.com/7z7vtm

Bootstrap Collapsing菜单默认显示全部

1 个答案: