답변:
당신이해야 할 일은 사용하는 것입니다 ...
data-toggle="collapse" data-target="#ElementToExpandOnClick" ... 클릭하려는 요소에서 축소 / 확장 효과를 트리거합니다.
with data-toggle="collapse"요소는 효과를 트리거 할 요소입니다. 이 data-target속성은 효과가 트리거 될 때 확장 될 요소를 나타냅니다.
선택적 data-parent으로 독립 축소 대신 아코디언 효과를 만들려면 다음과 같이 설정할 수 있습니다 .
data-parent="#accordion"또한 태그 data-toggle="collapse"가 아닌 요소를 사용하여 다음 CSS를 요소에 추가합니다 <a>.
.panel-heading {
cursor: pointer;
}다음 은 Bootstrap 3 documentation 의 수정 된 html 이 있는 jsfiddle 입니다 .
role="tab button"브라우저는 목록에서 가장 먼저 이해하는 목록을 해석 할 것 tab입니다. 그러나 두 가지 중 어느 것이 더 좋은지 잘 모르겠습니다. tab과 button역할 의 의미를 찾아 보면 선택할 수있는 해답을 얻을 수 있습니다.
또 다른 방법은 <a>전체 공간을 가득 채우는 것 panel-heading입니다. 이렇게하려면이 스타일을 사용하십시오.
.panel-title a {
display: block;
padding: 10px 15px;
margin: -10px -15px;
}이 데모를 확인하십시오 ( http://jsfiddle.net/KbQyx/ ).
그런 다음 제목을 클릭하면 실제로를 클릭합니다 <a>.
나는 잔인한 jsfiddle에서 몇 가지 사소한 결함을 발견했습니다.
전체 패널에서 포인터를 손으로 바꾸려면 다음을 사용하십시오.
.panel-heading {
cursor: pointer;
}<a>태그를 제거하고 (스타일 문제) 계속 유지 data-toggle="collapse" data-parent="#accordion" data-target="#collapse..."했습니다 panel-heading.
font-awesome.css내 jsfiddle에서 사용하여 갈매기 형 표시를위한 CSS 메소드를 추가했습니다 .
panel-heading합니다 panel-heading collapsed.
다음은 Bootstrap4에 대한 솔루션입니다. card-header클래스를 a태그 에 넣으면 됩니다. 이것은 W3Schools 의 예제에서 수정되었습니다 .
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div id="accordion">
<div class="card">
<a class="card-link card-header" data-toggle="collapse" href="#collapseOne" >
Collapsible Group Item #1
</a>
<div id="collapseOne" class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="card">
<a class="collapsed card-link card-header" data-toggle="collapse" href="#collapseTwo">
Collapsible Group Item #2
</a>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="card">
<a class="card-link card-header" data-toggle="collapse" href="#collapseThree">
Collapsible Group Item #3
</a>
<div id="collapseThree" class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
</div>
</div>간단한 해결책은 패딩을 제거 .panel-heading하고에 추가하는 것 .panel-title a입니다.
.panel-heading {
padding: 0;
}
.panel-title a {
display: block;
padding: 10px 15px;
}이 솔루션은 calfzhou가 게시 한 위와 유사하지만 약간 다릅니다.
다음은 Bootstrap 4.3의 작동 예입니다.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" >
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" >
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" >
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
</div>
</div>
</div>
</div>