我有一些复杂的 html 和一个小按钮下拉菜单，它会自动用预定值填充某些字段。当我单击该按钮上的其中一个选项时，javascript 函数会触发，但 Accordion 折叠起来，这会阻止用户看到单击该按钮的结果。除此之外，单击 Accordion 中的其他任何地方都会折叠它，从而阻止用户填写任何字段。
如何防止这种行为，以便仅当您单击面板标题时它才会关闭？
我的 HTML 示例:
<div class="panel panel-default" data-toggle="collapse" data-target="#collapse-7">
<div class="panel-heading">
<h3 class="panel-title" style="font-size: 20px">TAXATION (Residual)</h3>
</div>
<div id="collapse-7" class="panel-collapse collapse in">
<div class="panel-body">
<div class="row">
<div class="col-lg-10 bg-info">
<h4>Rating criteria:</h4>
<div class="col-sm-4"><p>1: Not capable of performing</p><p>2: Capable with significant / frequent intervention</p></div>
<div class="col-sm-4"><p>3: Capable with limited / periodic intervention</p><p>4: Capable with no intervention</p></div>
<div class="col-sm-4"><p>A: Advanced experience</p><p>B: Basic experience</p></div>
</div>
<div class="col-lg-2">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Default all to... <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" onclick="defaulter('7', 'A')">A</a></li>
<li><a href="#" onclick="defaulter('7', 'B')">B</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<table class="table">
<tbody><tr style="background-color: #DDD;">
<th colspan="5" style="font-size: 16px">
Competency: TX(R)1 - Calculates income tax payable & prepares income tax return for an individual
</th>
</tr>
<tr>
<th></th>
<th style="vertical-align: middle">Tasks to be performed:</th>
<th></th>
<th style="text-align: center; vertical-align: middle">Your Rating</th>
<th style="text-align: center; vertical-align: middle">
A / B
</th>
</tr>
<tr>
<td style="vertical-align: middle">TX(R)1.1</td>
<td style="vertical-align: middle; width: 60%">Collects and calculates the information needed to file the tax return for an individual, considering: · inclusion and classification of income from different sources (for example, employment including fringe benefits and lump sum benefits, property, business, capital gain / loss, other income ) · exclusion of exempt income · deductibility of expenses (for example, contributions to pension or retirement funds, income protection policies, assets used for trade purposes, legal fees and study at home)</td>
<td></td>
<td style="vertical-align: middle">
<input type="hidden" name="values[0].CompetencySkillId" value="TX(R)1.1">
<input style="text-align: center" min="1" max="4" data-bv-integer="true" data-bv-greaterthan-message="Invalid input" data-bv-greaterthan="true" data-bv-greaterthan-inclusive="false" data-bv-greaterthan-value="0" type="number" name="values[0].Rating" class="form-control">
</td>
<td style="vertical-align: middle">
<input style="text-align: center;" pattern="([ABab])" data-bv-regexp-message="This value must be A or B" type="text" name="values[0].AorB" class="form-control AorB-7">
</td>
</tr>
<tr>
<td style="vertical-align: middle">TX(R)1.2</td>
<td style="vertical-align: middle; width: 60%">Prepares the income tax return</td>
<td></td>
<td style="vertical-align: middle">
<input type="hidden" name="values[1].CompetencySkillId" value="TX(R)1.2">
<input style="text-align: center" min="1" max="4" data-bv-integer="true" data-bv-greaterthan-message="Invalid input" data-bv-greaterthan="true" data-bv-greaterthan-inclusive="false" data-bv-greaterthan-value="0" type="number" name="values[1].Rating" class="form-control">
</td>
<td style="vertical-align: middle">
<input style="text-align: center;" pattern="([ABab])" data-bv-regexp-message="This value must be A or B" type="text" name="values[1].AorB" class="form-control AorB-7">
</td>
</tr>
<tr>
<td colspan="5">
<div class="form-group">
<label class="col-sm-4 control-label">
Trainee’s reflection on professional skills utilised in demonstrating their competence in the performance of these tasks:
</label>
<div class="col-sm-8">
<input type="hidden" name="values[2].CompetencySkillId-Reflection" value="TX(R)1"><textarea rows="3" name="values[2].Rating" class="form-control"></textarea>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="5">
<div class="form-group">
<label class="col-sm-4 control-label">
Trainee’s comment i.r.o. reviewer’s rating for this competency:
</label>
<div class="col-sm-8">
<input type="hidden" name="values[3].CompetencySkillId-Comment" value="TX(R)1"><textarea rows="3" name="values[3].Rating" class="form-control"></textarea>
</div>
</div>
</td>
</tr>
<tr style="background-color: #DDD;">
<th colspan="5" style="font-size: 16px">
Competency: TX(R)2 - Calculates income tax payable & prepares income tax return for a corporation
</th>
</tr>
<tr>
<th></th>
<th style="vertical-align: middle">Tasks to be performed:</th>
<th></th>
<th style="text-align: center; vertical-align: middle">Your Rating</th>
<th style="text-align: center; vertical-align: middle">
A / B
</th>
</tr>
<tr>
<td style="vertical-align: middle">TX(R)2.1</td>
<td style="vertical-align: middle; width: 60%">"Collects and calculates the information needed to file the tax return for a corporation, considering: • type of corporation (for example, private, public, small business corporation, employment, foreign) • inclusion and classification of income (for example, active business income, income from property, capital gains, exemptions) • deductibility of expenses (for example, capital allowances, assessed losses and special allowances) • tax deductions and credits (for example, small business deduction, general tax reduction) • type of corporation (for example, private, public, small business corporation, employment, foreign)</td>
<td></td>
<td style="vertical-align: middle">
<input type="hidden" name="values[4].CompetencySkillId" value="TX(R)2.1">
<input style="text-align: center" min="1" max="4" data-bv-integer="true" data-bv-greaterthan-message="Invalid input" data-bv-greaterthan="true" data-bv-greaterthan-inclusive="false" data-bv-greaterthan-value="0" type="number" name="values[4].Rating" class="form-control">
</td>
<td style="vertical-align: middle">
<input style="text-align: center;" pattern="([ABab])" data-bv-regexp-message="This value must be A or B" type="text" name="values[4].AorB" class="form-control AorB-7">
</td>
</tr>
<tr>
<td style="vertical-align: middle">TX(R)2.2</td>
<td style="vertical-align: middle; width: 60%">Prepares the Income Tax return</td>
<td></td>
<td style="vertical-align: middle">
<input type="hidden" name="values[5].CompetencySkillId" value="TX(R)2.2">
<input style="text-align: center" min="1" max="4" data-bv-integer="true" data-bv-greaterthan-message="Invalid input" data-bv-greaterthan="true" data-bv-greaterthan-inclusive="false" data-bv-greaterthan-value="0" type="number" name="values[5].Rating" class="form-control">
</td>
<td style="vertical-align: middle">
<input style="text-align: center;" pattern="([ABab])" data-bv-regexp-message="This value must be A or B" type="text" name="values[5].AorB" class="form-control AorB-7">
</td>
</tr>
<tr>
<td style="vertical-align: middle">TX(R)2.3</td>
<td style="vertical-align: middle; width: 60%">Calculates secondary tax on companies or equivalent shareholder tax</td>
<td></td>
<td style="vertical-align: middle">
<input type="hidden" name="values[6].CompetencySkillId" value="TX(R)2.3">
<input style="text-align: center" min="1" max="4" data-bv-integer="true" data-bv-greaterthan-message="Invalid input" data-bv-greaterthan="true" data-bv-greaterthan-inclusive="false" data-bv-greaterthan-value="0" type="number" name="values[6].Rating" class="form-control">
</td>
<td style="vertical-align: middle">
<input style="text-align: center;" pattern="([ABab])" data-bv-regexp-message="This value must be A or B" type="text" name="values[6].AorB" class="form-control AorB-7">
</td>
</tr>
<tr>
<td colspan="5">
<div class="form-group">
<label class="col-sm-4 control-label">
Trainee’s reflection on professional skills utilised in demonstrating their competence in the performance of these tasks:
</label>
<div class="col-sm-8">
<input type="hidden" name="values[7].CompetencySkillId-Reflection" value="TX(R)2"><textarea rows="3" name="values[7].Rating" class="form-control"></textarea>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="5">
<div class="form-group">
<label class="col-sm-4 control-label">
Trainee’s comment i.r.o. reviewer’s rating for this competency:
</label>
<div class="col-sm-8">
<input type="hidden" name="values[8].CompetencySkillId-Comment" value="TX(R)2"><textarea rows="3" name="values[8].Rating" class="form-control"></textarea>
</div>
</div>
</td>
</tr>
<tr style="background-color: #DDD;">
<th colspan="5" style="font-size: 16px">
Competency: TX(R)3 - Calculates other taxes payable & prepares appropriate returns
</th>
</tr>
<tr>
<th></th>
<th style="vertical-align: middle">Tasks to be performed:</th>
<th></th>
<th style="text-align: center; vertical-align: middle">Your Rating</th>
<th style="text-align: center; vertical-align: middle">
A / B
</th>
</tr>
<tr>
<td style="vertical-align: middle">TX(R)3.1</td>
<td style="vertical-align: middle; width: 60%">Calculates the appropriate CGT tax payable on qualifying transactions</td>
<td></td>
<td style="vertical-align: middle">
<input type="hidden" name="values[9].CompetencySkillId" value="TX(R)3.1">
<input style="text-align: center" min="1" max="4" data-bv-integer="true" data-bv-greaterthan-message="Invalid input" data-bv-greaterthan="true" data-bv-greaterthan-inclusive="false" data-bv-greaterthan-value="0" type="number" name="values[9].Rating" class="form-control">
</td>
<td style="vertical-align: middle">
<input style="text-align: center;" pattern="([ABab])" data-bv-regexp-message="This value must be A or B" type="text" name="values[9].AorB" class="form-control AorB-7">
</td>
</tr>
<tr>
<td style="vertical-align: middle">TX(R)3.2</td>
<td style="vertical-align: middle; width: 60%">Records indirect taxes (VAT) for transactions in accordance with relevant legislation</td>
<td></td>
<td style="vertical-align: middle">
<input type="hidden" name="values[10].CompetencySkillId" value="TX(R)3.2">
<input style="text-align: center" min="1" max="4" data-bv-integer="true" data-bv-greaterthan-message="Invalid input" data-bv-greaterthan="true" data-bv-greaterthan-inclusive="false" data-bv-greaterthan-value="0" type="number" name="values[10].Rating" class="form-control">
</td>
<td style="vertical-align: middle">
<input style="text-align: center;" pattern="([ABab])" data-bv-regexp-message="This value must be A or B" type="text" name="values[10].AorB" class="form-control AorB-7">
</td>
</tr>
<tr>
<td style="vertical-align: middle">TX(R)3.3</td>
<td style="vertical-align: middle; width: 60%">Prepares the indirect tax (VAT) return</td>
<td></td>
<td style="vertical-align: middle">
<input type="hidden" name="values[11].CompetencySkillId" value="TX(R)3.3">
<input style="text-align: center" min="1" max="4" data-bv-integer="true" data-bv-greaterthan-message="Invalid input" data-bv-greaterthan="true" data-bv-greaterthan-inclusive="false" data-bv-greaterthan-value="0" type="number" name="values[11].Rating" class="form-control">
</td>
<td style="vertical-align: middle">
<input style="text-align: center;" pattern="([ABab])" data-bv-regexp-message="This value must be A or B" type="text" name="values[11].AorB" class="form-control AorB-7">
</td>
</tr>
<tr>
<td colspan="5">
<div class="form-group">
<label class="col-sm-4 control-label">
Trainee’s reflection on professional skills utilised in demonstrating their competence in the performance of these tasks:
</label>
<div class="col-sm-8">
<input type="hidden" name="values[12].CompetencySkillId-Reflection" value="TX(R)3"><textarea rows="3" name="values[12].Rating" class="form-control"></textarea>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="5">
<div class="form-group">
<label class="col-sm-4 control-label">
Trainee’s comment i.r.o. reviewer’s rating for this competency:
</label>
<div class="col-sm-8">
<input type="hidden" name="values[13].CompetencySkillId-Comment" value="TX(R)3"><textarea rows="3" name="values[13].Rating" class="form-control"></textarea>
</div>
</div>
</td>
</tr>
<tr style="background-color: #DDD;">
<th colspan="5" style="font-size: 16px">
Competency: TX(R)4 - Discloses all tax information and computations correctly in the financial statements
</th>
</tr>
<tr>
<th></th>
<th style="vertical-align: middle">Tasks to be performed:</th>
<th></th>
<th style="text-align: center; vertical-align: middle">Your Rating</th>
<th style="text-align: center; vertical-align: middle">
A / B
</th>
</tr>
<tr>
<td style="vertical-align: middle">TX(R)4.1</td>
<td style="vertical-align: middle; width: 60%">Discloses all relevant tax information and amounts in the financial statements of an entity in accordance with guidance provided by the relevant accounting standards</td>
<td></td>
<td style="vertical-align: middle">
<input type="hidden" name="values[14].CompetencySkillId" value="TX(R)4.1">
<input style="text-align: center" min="1" max="4" data-bv-integer="true" data-bv-greaterthan-message="Invalid input" data-bv-greaterthan="true" data-bv-greaterthan-inclusive="false" data-bv-greaterthan-value="0" type="number" name="values[14].Rating" class="form-control">
</td>
<td style="vertical-align: middle">
<input style="text-align: center;" pattern="([ABab])" data-bv-regexp-message="This value must be A or B" type="text" name="values[14].AorB" class="form-control AorB-7">
</td>
</tr>
<tr>
<td style="vertical-align: middle">TX(R)4.2</td>
<td style="vertical-align: middle; width: 60%">Calculates and correctly discloses deferred tax in an entity’s financial statements</td>
<td></td>
<td style="vertical-align: middle">
<input type="hidden" name="values[15].CompetencySkillId" value="TX(R)4.2">
<input style="text-align: center" min="1" max="4" data-bv-integer="true" data-bv-greaterthan-message="Invalid input" data-bv-greaterthan="true" data-bv-greaterthan-inclusive="false" data-bv-greaterthan-value="0" type="number" name="values[15].Rating" class="form-control">
</td>
<td style="vertical-align: middle">
<input style="text-align: center;" pattern="([ABab])" data-bv-regexp-message="This value must be A or B" type="text" name="values[15].AorB" class="form-control AorB-7">
</td>
</tr>
<tr>
<td colspan="5">
<div class="form-group">
<label class="col-sm-4 control-label">
Trainee’s reflection on professional skills utilised in demonstrating their competence in the performance of these tasks:
</label>
<div class="col-sm-8">
<input type="hidden" name="values[16].CompetencySkillId-Reflection" value="TX(R)4"><textarea rows="3" name="values[16].Rating" class="form-control"></textarea>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="5">
<div class="form-group">
<label class="col-sm-4 control-label">
Trainee’s comment i.r.o. reviewer’s rating for this competency:
</label>
<div class="col-sm-8">
<input type="hidden" name="values[17].CompetencySkillId-Comment" value="TX(R)4"><textarea rows="3" name="values[17].Rating" class="form-control"></textarea>
</div>
</div>
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</div>
最佳答案
您已将 data-toggle 应用于面板。像这样:
<div class="panel panel-default" data-toggle="collapse" data-target="#collapse-7">
尝试将它仅应用于标题:
<div class="panel panel-default"> // Removed attributes.
<div class="panel-heading" data-toggle="collapse" data-target="#collapse-7">
这似乎可以解决问题!
关于javascript - 防止 Bootstrap 3 Accordion 的奇怪行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27237633/