我有这个带有 javascript 的 html 代码，它使用 bootstrap 和Signature Pad。我正在使用 Bootstrap 的折叠功能。当我将第一个面板设置为默认值时，签名板不起作用（我无法签名），但是当我将第三个面板添加为默认值时，它会按预期工作。知道为什么会发生这种情况吗？
这是代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Signature Pad demo</title>
<link href="css/signature-pad.css" rel="stylesheet" />
<title>Employee Onboarding Demo</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<meta name="description" content="Signature Pad - HTML5 canvas based smooth signature drawing using variable width spline interpolation.">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/signature-pad.css">
</head>
<body onselectstart="return false">
<form id="form1" >
<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="#collapseOne">Enter Your Personal Details</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<table>
<tr>
<td>First Name</td>
<td>
<input type="text" ID="txtFName" name="txtFName"></td>
<td></td>
</tr>
<tr>
<td>Last Name</td>
<td>
<input type="text" ID="txtLName" name="txtLName"></td>
<td></td>
</tr>
<tr>
<td>Middle Initial</td>
<td>
<input type="text" ID="txtMiddleI" name="txtMiddleI"></td>
<td></td>
</tr>
<tr>
<td>Other Name</td>
<td>
<input type="text" ID="txtOtherName" name="txtOtherName"></td>
<td></td>
</tr>
<tr><td colspan="3"><button ID="btnSavePersonal" OnClick="btnSavePersonal_Click">Save</button>
</td></tr>
</table>
</div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Answer These Questions</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<table>
<tr>
<td>
<asp:CheckBox ID="CheckBox1" runat="server" /></td>
<td>1. A citizen of the United States</td>
<td></td>
</tr>
<tr>
<td><asp:CheckBox ID="CheckBox2" runat="server" /></td>
<td>2. A noncitizen national of the United States (See instructions)</td>
<td></td>
</tr>
<tr>
<td><asp:CheckBox ID="CheckBox3" runat="server" /></td>
<td>3. A lawful permanent resident. (Alien Registration Number/USCIS Number):</td>
<td>
<asp:TextBox ID="txtARNUSCIS" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td><asp:CheckBox ID="CheckBox4" runat="server" /></td>
<td>4. An alien authorized to work until (expiration date, if applicable, mm/dd/yyyy):</td>
<td>
<asp:TextBox ID="txtARNExpDt" runat="server"></asp:TextBox></td>
</tr>
<tr><td colspan="3"><asp:Button ID="btnSaveQA" runat="server" Text="Save" OnClick="btnSaveQA_Click" /></td></tr>
</table>
</div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Sign Here</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<div id="signature-pad" class="m-signature-pad">
<div class="m-signature-pad--body">
<canvas></canvas>
</div>
<div class="m-signature-pad--footer">
<div class="description">Sign above</div>
<button type="button" class="button clear" data-action="clear">Clear</button>
<button type="button" class="button save" data-action="save">Save</button>
<input type="text" name="abc" id="abc">
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<script src="js/signature_pad.js"></script>
<script src="js/app.js"></script>
</body>
</html>