0
일부 복잡한 html이 있고 작은 버튼 드롭 다운으로 인해 특정 필드가 미리 결정된 값으로 자동 채워집니다. 해당 버튼의 옵션 중 하나를 클릭하면 javascript 함수가 실행되지만 아코디언이 축소되어 사용자가 해당 버튼을 클릭 한 결과를 볼 수 없습니다. 그 외에도 아코디언의 다른 곳을 클릭하면 축소되어 사용자가 필드를 채울 수 없습니다.부트 스트랩의 이상한 동작 방지 3 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>
디버깅하려면 JavaScript가 필요할 것입니다. 당신이 최적 일 JSFiddle을 만들 수 있다면. –
실제 자바 스크립트는 포함되어 있지 않지만 아코디언은 부트 스트랩 사이트의 지침에 따라 html 속성을 통해 초기화됩니다. 우리가 언급 한 버튼을 무시하면 JS 가치가 없습니다. –
사실 나는 그것을 지금 본다. Bootply를 만들면 어디서든지 클릭하면 모든 것을 망각하도록 최소화 할 수 있습니다. http://www.bootply.com/MoAPhNAwlT –