我已经看了几个小时的代码，我无法弄清楚为什么崩溃功能不起作用。我让它在类似的程序中工作，但对于我的生活，我不明白为什么它不在这里工作。
当您使用alert命令单击链接Employement Forms时，jquery data-toggle脚本会按预期触发，但崩溃不会...崩溃。救命？？？的 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>
答案 0 :(得分：0)
您需要使用tbody代替div来折叠表格的行。
@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>