Question

在模态中，我试图以可折叠的形式连续添加3个文本字段。有一个名为add another的按钮，如果我点击那3个文本框应显示在第二行。我尝试使用模式中的#collapse示例，但它不起作用。点击添加按钮时，流，机构和传递的年龄应该是合并的。

＆＃13;

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-body">
      <div class="panel panel-default">
        <div class="panel-body">
          <button type="button" class="close" data-dismiss="modal">
            <font color="black">
              <a href="hrtoolkit.html" style="color: darkred">
                <span style="color: darkred;">&times;</span>
              </a>
            </font>
          </button>
          <label class=" col-sm-4">Edit &nbsp;&nbsp; Save</label>
          <br />
          <div class="container">
            <div class="row">
              <div class="col-md-6">
                <div class="form-body">
                  <br />
                  <table class="table table-responsive">
                    <tbody>
                      <tr>
                        <td class="outside" style="border-style: none; border-bottom-style: none; ">
                          <input type="text" class="form-control" placeholder="10th" />
                        </td>
                </div>
              </div>
              <td class="outside" style="border-style: none; border-bottom-style: none;">
                <input type="text" class="form-control" placeholder="Degree" /> </td>
              <td class="outside" style="border-style: none; border-bottom-style: none;">
                <button type="button" class="btn btn-default " data-toggle="collapse" data-target="#collapseExample" style="font-size: 9px; background-color: #ccc; font-weight: bold;">Add Another
                </button>
                </tr>

                <div class="collapse" id="collapseExample">
                  <tr>
                    <td class="outside" style="border-style: none; border-bottom-style: none; ">Stream
                      <input type="text" class="form-control" placeholder="Stream" />
                    </td>
                    <td class="outside" style="border-style: none; border-bottom-style: none;">Institution
                      <input type="text" class="form-control" placeholder="Institution" />
                    </td>
                    <td class="outside" style="border-style: none; border-bottom-style: none;">Yr of Passing
                      <input type="date" class="form-control" id="resizedTextbox" placeholder="Yr of Passing"
                      />
                    </td>
                  </tr>
                </div>

                <tr>
                  <td class="outside" style="border-style: none; border-bottom-style: none; ">Stream
                    <input type="text" class="form-control" placeholder="Stream" />
                  </td>
                  <td class="outside" style="border-style: none; border-bottom-style: none;">Institution
                    <input type="text" class="form-control" placeholder="Institution" />
                  </td>

                  <td class="outside" style="border-style: none; border-bottom-style: none;">Yr of Passing
                    <input type="date" class="form-control" id="resizedTextbox" placeholder="Yr of Passing"
                    />
                  </td>

                </tr>

                <tr>
                  <td class="outside" style="border-style: none; border-bottom-style: none;">State
                    <input type="text" class="form-control" placeholder="State" />
                  </td>
                  <td class="outside" style="border-style: none; border-bottom-style: none;">Country
                    <input type="text" class="form-control" placeholder="Country" />
                  </td>
                  <td class="outside" style="border-style: none; border-bottom-style: none;">
                    <br>
                    <input type="file" class="custom-file-input">
                  </td>


                </tr>


                </tbody>
                </table>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

＆＃13;

Answer 1

它正在工作，请参阅此示例

https://codepen.io/creativedev/pen/YvqrbB

问题是你在表格中使用了div标签。只需在tr

中传递崩溃类 class =“collapse”id =“collapseExample”

<tr class="collapse" id="collapseExample">
   <td class="outside" style="border-style: none; border-bottom-style: none; ">Stream
    <input type="text" class="form-control" placeholder="Stream" />
   </td>
   <td class="outside" style="border-style: none; border-bottom-style: none;">Institution
     <input type="text" class="form-control" placeholder="Institution" />
   </td>
   <td class="outside" style="border-style: none; border-bottom-style: none;">Yr of Passing
    <input type="date" class="form-control" id="resizedTextbox" placeholder="Yr of Passing" />
   </td>
 </tr>

折叠不适用于模态

1 个答案: