Question

我制作了一个带三个项目的bootstrap手风琴菜单。它们几乎像我想要的那样工作，但我想在开头显示第一步：

这是我的代码：

          <div class="list-group panel">
        <a href="#step1" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu">Stap 1</a>
        <div class="collapse" id="step1">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <a href="#step2" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu">Stap 2</a>
        <div class="collapse" id="step2">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <a href="#step3" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu">Stap 2</a>
        <div class="collapse" id="step3">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
      </div>

我尝试使用css：#step1{ display: block; }但这会让一切变得混乱......我希望有人可以帮助我。

Answer 1

您需要将类.in添加到您的div中。

<div class="collapse in" id="step1">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

请参阅此处的示例 - http://getbootstrap.com/javascript/#collapse

Answer 2

你的意思是这样的。！

<强> code.html

    <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="#collapse1">Income source#1</a>
        </h4>
    </div>

    <div id="collapse1" class="panel-collapse collapse in">
    <div class="panel-body"><div class="col-sm-2 form-group">
      <input type="text" placeholder="" class="form-control"  id="docno" name="ay">
    </div>  

    <div class="col-sm-3"><select class="form-control m-b" name="income">
    <option>Income type</option>
    <option value="salary">Salary</option>
    <option value="house">House income</option>
    </select>

    </div>

    <div class="col-sm-2 form-group">
    <input type="text" placeholder="" class="form-control"  id="doe" name="fd">
    </div>
    <div class="col-sm-2 form-group">
    <input type="text" placeholder="" class="form-control"  id="" name="">
    </div>
    </div>
    </div> </div>
    <div class="panel panel-default">
    <div class="panel-heading">
    <h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Income source#2</a>
    </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
     <div class="panel-body"><div class="col-sm-2 form-group">
     <input type="text" placeholder="Assessment year" class="form-control"  id="docno1" name="ay1">
    </div>  

  <div class="col-sm-3"><select class="form-control m-b" name="income1">
   <option>Income type</option>
   <option value="salary">Salary</option>
   <option value="house">House income</option>
   </select>
   </div>
   <div class="col-sm-2 form-group">
   <input type="text" placeholder="Filled date" class="form-control"  id="doe1" name="fd1">
   </div>
   <div class="col-sm-2 form-group">
   <input type="text" placeholder="Tax amount" class="form-control"  id="doe" name="tax1">
   </div>
   <div class="col-sm-2 form-group">
   <input class="form-control " type="file" name = "doc1" id = "doc1">
        </div></div>
          </div></div>
                </div>

如何在开始时折叠一个手风琴菜单项

2 个答案: