부트 스트랩 아코디언에서 a텍스트를 클릭하지 않고 panel-headingdiv의 아무 곳이나 클릭하면 축소되도록하고 싶습니다 .
Bootstrap 3을 사용하고 있습니다. 따라서 아코디언 대신 축소 가능한 패널입니다. 전체 패널을 클릭 가능하게 만드는 방법을 알고 있습니까?
답변
당신이해야 할 일은 사용하는 것입니다 …
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 입니다 .
답변
또 다른 방법은 <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 메소드를 추가했습니다 .
답변
다음은 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가 게시 한 위와 유사하지만 약간 다릅니다.
답변
실제로 내 패널에는 이 축소 상태 화살표 아이콘이 있었고이 게시물에서 다른 답변을 시도했지만 아이콘 위치가 변경되었으므로 접기 상태 화살표 아이콘 이있는 솔루션이 있습니다.
이 맞춤 CSS 추가
.panel-heading
{
cursor: pointer;
padding: 0;
}
a.accordion-toggle
{
display: block;
padding: 10px 15px;
}크레딧은 이 포스트 응답자에게 전달됩니다.
희망이 도움이됩니다.
답변
다음은 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>