Bootstrap 3. 折叠不起作用

Question

我已经查看这段代码好几个小时了，但我不明白为什么折叠功能不起作用。我让它在一个类似的程序中工作，但在我的一生中，我不明白为什么它不能在这里工作。

当您使用 data-toggle 命令单击 link Employement Forms 时，jquery alert 脚本会按预期触发，但不会折叠... 坍塌。帮助？？？ TIA

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Intranet</title>

    <!-- Bootstrap -->
    <link href="styles/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link href='https://fonts.googleapis.com/css?family=Lobster+Two:700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
    <style>
        #pgHeader{
            font-family: 'Lobster Two', cursive;
            font-size: 28pt;
            color: #004000;
            padding-left:16px;
        }
        #pgDate{
            font-family: 'Oswald', sans-serif;
            font-size: 22pt;
            color: #004000;
            margin-right:26px;
            margin-top: 12px;
        }
        .container-body{
            margin:18px;
        }
        th{
            color:#ffffff;
            background-color:#104000
        }
    </style>
  </head>
  <body>
    <img alt="Brand" src="images/bc.jpg"><span id="pgHeader">Benton County Intranet</span>
    <div id="pgDate" class="pull-right"><?php echo $Today; ?></div>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">intranet</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Forms</a></li>
                    <li><a href="http://www.co.benton.mn.us" target="_blank">County Website</a></li>
                    <li><a href="http://bugle/" target="_self">The Bugle</a></li>
                    <li><a href="#">Benefits</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Applications <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="http://mail.co.benton.mn.us" target="_self">EMail (Web Client)</a></li>
                            <li><a href="http://timesheets/" target="_self">Timesheets</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="http://trackit/TrackItWeb/SelfService/Login" target="_self">IT Helpdesk Requests</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="http://intranet/pm" target="_self">Propery Management Requests</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Other Resources <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="http://www.co.benton.mn.us/County_Board/Meeting_Agendas_and_Minutes.php" target="_blank">Board Agenda/Minutes</a></li>
                            <li><a href="#">Budget</a></li>
                            <li><a href="#">County Organizational Chart</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Fee Schedule</a></li>
                            <li><a href="#">Handbook for MN Counties</a></li>
                            <li><a href="#">Health & Wellness</a></li>
                            <li><a href="#">LEAN Resources</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Management Team Minutes</a></li>
                            <li><a href="#">Technology Committee Minutes</a></li>
                            <li><a href="#">Safety Committee Minutes</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">National Incident Management System (NIMS) Training</a></li>
                            <li><a href="#">Personnel Policies</a></li>
                            <li><a href="#">Send Anonymous Suggestion</a></li>
                            <li><a href="#">Witness Reimbursement Policy</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-nav">
                    <li><a href="./PhoneDir.php">Telephone Directory</a></li>
                </ul> 
                <form class="navbar-form navbar-right" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>

            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div class="container-body">
        <div class="panel panel-primary">
            <!-- Default panel contents -->
            <div class="panel-heading">Miscellaneous Forms
                <span class="pull-right">
                    <a href="./FormEdit.php" class="btn btn-success" style="margin-top:-8px;">Manage Forms</a>
                </span>
            </div>
            <div class="panel-body">    
                <!-- Table -->
                <table class="table table-condensed table-hover table-striped">
                    <th width="30%">Form Name</th>
                    <th>Form Description</th>
                    <tr>
                        <td colspan='2'>
<!-- Here is the trigger -->
                            <a data-toggle='collapse' href='#block1' data-target='#block1'>
                                <strong>Employement Forms</strong>
                            </a>
                            <span style='margin-left:36px; font-size:10pt; font-weight:700; color:#006600'>
                                (On-Off Boarding, Emergency Notifiacations)
                            </span>
                        </td>
<!-- Here is a code block that should collapse -->
                        <div class='collapse' id='block1'>
                            <tr>
                                <td style='padding-left:18px;'>
                                    <a href='http://intranetapps/onboarding.php' target='_blank'> New Employee On-Boarding</a>
                                </td>
                                <td>
                                    Fillable form for new employees. Please complete at least 14 days before employee starts
                                </td>
                            </tr>
                            <tr>
                                <td style='padding-left:18px;'>
                                    <a href='http://intranetapps/offboarding.php' target='_blank'> Employee Off-Boarding</a>
                                </td>
                                <td>
                                    Fillable form for people leaving the Countys employment
                                </td>
                            </tr>
                            <tr>
                                <td style='padding-left:18px;'>
                                    <a href='./forms/EMPLOYEE-EMERGENCY-NOTIFICATION-FORM-original.pdf' target='_blank'> Employee Emergency Notification</a>
                                </td>
                                <td>
                                    List of persons to be notified in the event of an emergency
                                </td>
                            </tr>
                        </tr>
                    </div>
                </table>
            </div>
        </div>
    </div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

    <script type = "text/javascript">
   $(function () { 
       $('#block1').on('show.bs.collapse', function () {
         alert('Hey, this alert shows up when you expand it');
      })
   });
</script>


  </body>
</html>

Answer 1

您需要使用 tbody 而不是 div 来折叠 table 的行。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

#pgHeader{
  font-family: 'Lobster Two', cursive;
  font-size: 28pt;
  color: #004000;
  padding-left:16px;
}
#pgDate{
  font-family: 'Oswald', sans-serif;
  font-size: 22pt;
  color: #004000;
  margin-right:26px;
  margin-top: 12px;
}
.container-body{
  margin:18px;
}
th{
  color:#ffffff;
  background-color:#104000
}

<img alt="Brand" src="http://placehold.it/50x40"><span id="pgHeader">Benton County Intranet</span>
<div id="pgDate" class="pull-right"><?php echo $Today; ?></div>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">intranet</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Forms</a></li>
        <li><a href="http://www.co.benton.mn.us" target="_blank">County Website</a></li>
        <li><a href="http://bugle/" target="_self">The Bugle</a></li>
        <li><a href="#">Benefits</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Applications <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="http://mail.co.benton.mn.us" target="_self">EMail (Web Client)</a></li>
            <li><a href="http://timesheets/" target="_self">Timesheets</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="http://trackit/TrackItWeb/SelfService/Login" target="_self">IT Helpdesk Requests</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="http://intranet/pm" target="_self">Propery Management Requests</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Other Resources <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="http://www.co.benton.mn.us/County_Board/Meeting_Agendas_and_Minutes.php" target="_blank">Board Agenda/Minutes</a></li>
            <li><a href="#">Budget</a></li>
            <li><a href="#">County Organizational Chart</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Fee Schedule</a></li>
            <li><a href="#">Handbook for MN Counties</a></li>
            <li><a href="#">Health & Wellness</a></li>
            <li><a href="#">LEAN Resources</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Management Team Minutes</a></li>
            <li><a href="#">Technology Committee Minutes</a></li>
            <li><a href="#">Safety Committee Minutes</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">National Incident Management System (NIMS) Training</a></li>
            <li><a href="#">Personnel Policies</a></li>
            <li><a href="#">Send Anonymous Suggestion</a></li>
            <li><a href="#">Witness Reimbursement Policy</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav">
        <li><a href="./PhoneDir.php">Telephone Directory</a></li>
      </ul> 
      <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<div class="container-body">
  <div class="panel panel-primary">
    <!-- Default panel contents -->
    <div class="panel-heading">Miscellaneous Forms
      <span class="pull-right">
        <a href="./FormEdit.php" class="btn btn-success" style="margin-top:-8px;">Manage Forms</a>
      </span>
    </div>
    <div class="panel-body">  
      <!-- Table -->
      <table class="table table-condensed table-hover table-striped">
        <tr>        
          <th width="30%">Form Name</th>
          <th>Form Description</th>
        </tr>          
        <tr>
          <td colspan='2'>

<!-- Here is the trigger -->
            <a href="#block1" data-toggle="collapse" aria-expanded="false" aria-controls="block1">
              <strong>Employement Forms</strong>
            </a>
<!-- The end of the trigger -->

            <span style='margin-left:36px; font-size:10pt; font-weight:700; color:#006600'>
              (On-Off Boarding, Emergency Notifiacations)
            </span>
          </td>
        </tr>
        
<!-- Here is a code block that should collapse -->
        <tbody class="collapse" id="block1">
          <tr>
            <td style='padding-left:18px;'>
              <a href='http://intranetapps/onboarding.php' target='_blank'> New Employee On-Boarding</a>
            </td>
            <td>
              Fillable form for new employees. Please complete at least 14 days before employee starts
            </td>
          </tr>
          <tr>
            <td style='padding-left:18px;'>
              <a href='http://intranetapps/offboarding.php' target='_blank'> Employee Off-Boarding</a>
            </td>
            <td>
              Fillable form for people leaving the Countys employment
            </td>
          </tr>
          <tr>
            <td style='padding-left:18px;'>
              <a href='./forms/EMPLOYEE-EMERGENCY-NOTIFICATION-FORM-original.pdf' target='_blank'> Employee Emergency Notification</a>
            </td>
            <td>
              List of persons to be notified in the event of an emergency
            </td>
          </tr>
        </tbody>
<!-- The end of the collapsible block -->
      
      </table>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Bootstrap 3. 折叠不起作用

Bootsrap 3. Collapse not working

twitter-bootstrap

collapse