Question

Bootstrap Data toggle collapse无法正常工作。问题是当点击第二个链接时，第一个链接不是切换崩溃

**Fiddle**

Demo

Answer 1

，否则

请在第一个标签内容div中删除课程显示

这

<div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="heading1">

到

<div id="collapse1" class="collapse" role="tabpanel" aria-labelledby="heading1">

它会起作用。

Answer 2

试试吧。现在，如果您点击第二个链接，则第一个链接将崩溃。

<html>
   <head>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
      <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </head>
   <body>
   <div id="accordion">
      <div class="card card-plain">
         <div class="card-header" role="tab" id="heading1">
            <a data-toggle="collapse" aria-expanded="true" aria-controls="collapse1"  data-target="#collapse1">
            Company Information
            <i class="now-ui-icons arrows-1_minimal-down"></i>
            </a>
         </div>
         <div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="heading1" data-parent="#accordion">
            <div class="card-body">
               <div class="row">
                  <div class="col-sm-6">
                     <label>Company Name</label>
                     <input class="form-control" id="comp_entity" name="comp_entity" type="text" placeholder="Company Name" value="">
                  </div>
                  <div class="col-sm-6">
                     <label>Business Unit / Division</label>
                     <input class="form-control" id="bus_unit_div" name="bus_unit_div" type="text" placeholder="Business Unit / Division" value="">
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="card card-plain">
         <div class="card-header" role="tab" id="heading2">
            <a class="collapsed" data-toggle="collapse" aria-expanded="false" aria-controls="collapse2" data-target="#collapse2">
            Employee Information
            <i class="now-ui-icons arrows-1_minimal-down"></i>
            </a>
         </div>
         <div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="heading2" data-parent="#accordion">
            <div class="card-body">
               <div class="row">
                  <div class="col-sm-6">
                     <label>Job title / role</label>
                     <input class="form-control" id="job_title" name="job_title" type="text" placeholder="Job Title / Role" value="">
                  </div>
               </div>
               <div class="row">
                  <div class="col-sm-6">
                     <label>Hours of Work</label>
                     <input class="form-control" id="hours_of_work" name="hours_of_work" type="text" placeholder="Hours of Work" onkeyup="this.value = this.value.replace(/[^0-9]/, '')" value="">
                  </div>
                  <div class="col-sm-6">
                     <label>Performance Rating</label>
                     <input class="form-control" id="perform_rating" name="perform_rating" type="text" placeholder="Performance Rating" value="">
                  </div>
               </div>
            </div>
            <div class="row">
               <div class="col-sm-6">
                  <label>Personnel (Staff) Number</label>
                  <input class="form-control" id="personal_staff_num" name="personal_staff_num" type="text" placeholder="Personnel (Staff) number" onkeyup="this.value = this.value.replace(/[^0-9]/, '')" value="">
               </div>
            </div>
         </div>
      </div>
      </div>     
   </body>
</html>

Answer 3

使用＆＃39;＆＃39;而不是显示＆＃39;在下面的代码中

<div id="collapse1" class="collapse in" role="tabpanel" aria-labelledby="heading1">

Bootstrap切换崩溃不起作用

3 个答案: