반응형
부트스트랩 3 Chevron 아이콘으로 표시 상태 축소
Collapse에 대한 Bootstrap 3 Javascript 예제 페이지에서 가져온 핵심 예제를 사용하여 Collapse 아이콘을 사용하여 Collapse 상태를 보여줄 수 있었습니다.
이 작업은 다음을 사용하여 수행됩니다.
$('#accordion .accordion-toggle').click(function (e) {
var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
$("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});
이것은 작동합니다(모든 브라우저에서 완전히 테스트된 것은 아닙니다). 하지만 이것에 대한 더 우아한 해결책이 있는지 궁금합니다.
이상적으로 핵심 기능을 사용하고 싶지만, 어떻게 하면 동일한 결과를 얻을 수 있을지 모르겠습니다.
$('#accordion').on('hidden.bs.collapse', function () {
//do something...
})
여기 jsfiddle에서 작동하는 버전이 있습니다.
.panel-heading .accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
content: "\e114"; /* adjust as needed, taken from bootstrap.css */
float: right; /* adjust as needed */
color: grey; /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
/* symbol for "collapsed" panels */
content: "\e080"; /* adjust as needed, taken from bootstrap.css */
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript" ></script>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>시각 효과:
다음과 같은 코드를 사용할 수 있습니다.
function toggleChevron(e) {
$(e.target)
.prev('.panel-heading')
.find('i.indicator')
.toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
=> 작업 JsFiddle
가장 많은 상승폭으로 답변을 개선하려면 페이지의 초기 로드에서 모든 쉐브론이 동일한 방향을 가리킨다는 것을 알아차린 사람이 있을 수 있습니다.접힌 항목을 로드할 요소에 "접힌" 클래스를 추가하여 이 문제를 해결할 수 있습니다.
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
다음은 작동 중인 바이올린입니다: http://jsfiddle.net/3gYa3/585/
Bludream의 답변 개선:
당신은 확실히 FontAwesome을 사용할 수 있습니다!
패널 제목 클래스와 함께 "접힌" 클래스를 포함해야 합니다.패널을 클릭할 때까지 "붕괴된" 클래스가 포함되지 않으므로 올바른 쉐브론을 표시하기 위해 "붕괴된" 클래스를 포함합니다(즉, 접힌 경우에는 쉐브론 오른쪽이 표시되고 열린 경우에는 쉐브론 아래로 표시됨).
HTML
<div class="panel panel-default">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseOrderItems1">Products 1 <i class="chevron fa fa-fw" ></i></div>
<div class="collapse" id="collapseOrderItems1">
<p>Lorem ipsum...</p>
</div>
</div>
CSS
.panel-heading .chevron:after {
content: "\f078";
}
.panel-heading.collapsed .chevron:after {
content: "\f054";
}
또한 기존 클래스를 사용하는 대신 새로운 클래스를 만드는 것이 좋습니다.
코드펜을 참조하십시오. 예: http://codepen.io/anon/pen/PPxOJX
큰 게이트와 스테이크파이 덕분입니다.Dreamonic 질문에 대한 답변으로 모든 헤더를 클릭할 수 있도록 약간 변경하고 링크에서 밑줄을 지웠습니다.아이콘이 같은 줄에 나타나도록 강제하기 위해 CSS 명령어 끝에 h4를 추가했습니다.수정된 코드는 다음과 같습니다.
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<h4 class="panel-title">Collapsible Group Item #1</h4>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<h4 class="panel-title">Collapsible Group Item #2</h4>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<h4 class="panel-title">Collapsible Group Item #3</h4>
</a>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
그리고 수정된 CSS:
.panel-heading .accordion-toggle h4:after {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings';
content: "\e114";
float: right;
color: grey;
overflow: no-display;
}
.panel-heading .accordion-toggle.collapsed h4:after {
/* symbol for "collapsed" panels */
content: "\e080";
}
a.accordion-toggle{
text-decoration: none;
}
이것이 오래된 것은 알지만 2018년이기 때문에 코드를 단순화하고 쉐브론이 접히든 안 접히든 회전하게 함으로써 사용자 경험을 향상시키는 것에 대해 답변을 해야겠다고 생각했습니다.하지만 저는 A 폰트를 사용하고 있습니다.여기 CSS가 있습니다.
a[data-toggle="collapse"] .rotate {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
a[data-toggle="collapse"].collapsed .rotate {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
패널 섹션의 HTML은 다음과 같습니다.
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
<i class="fa fa-chevron-right pull-right rotate"></i>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
저는 부트스트랩 풀우측을 사용하여 전체 너비와 반응성이 있어야 하는 패널 헤딩의 오른쪽 끝까지 쉐브론을 당깁니다.CSS는 모든 애니메이션 작업을 수행하고 패널이 접혔는지 여부를 기준으로 쉐브론을 회전시킵니다.간단하죠.
html에서 모든 종류의 토글 콘텐츠를 바로 처리할 수 있는 몇 가지 순수한 css 도우미 클래스가 있습니다.
전환해야 하는 모든 요소에서 작동합니다.레이아웃이 무엇이든 간에 전환 요소 내에 .if-collapseed 및 .if-not-collapseed 클래스가 있는 두 개의 요소 안에 배치하기만 하면 됩니다.
유일한 단점은 원하는 토글의 초기 상태를 설정해야 한다는 것입니다.처음에 닫히면 접힌 클래스를 토글에 놓습니다.
또한 선택기가 아니라 IE8에서 작동하지 않습니다.
HTML 예:
<a class="btn btn-primary collapsed" data-toggle="collapse" href="#collapseExample">
<!--You can put any valid html inside these!-->
<span class="if-collapsed">Open</span>
<span class="if-not-collapsed">Close</span>
</a>
<div class="collapse" id="collapseExample">
<div class="well">
...
</div>
</div>
버전 감소:
[data-toggle="collapse"] {
&.collapsed .if-not-collapsed {
display: none;
}
&:not(.collapsed) .if-collapsed {
display: none;
}
}
CSS 버전:
[data-toggle="collapse"].collapsed .if-not-collapsed {
display: none;
}
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
display: none;
}
작동하는 간단한 예
- 신체 상태 표시/숨김
- 부모에게 다가가다
- 찾기 아이콘
- 변경 아이콘
HTML:
<body>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#jai">Jai</a>
</div>
<div id="jai" class="accordion-body collapse in">
<div>
<div class="accordion-inner">body content 1</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">jai2</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div>
<div class="accordion-inner">body content 2</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse3">jai3</a>
</div>
<div id="collapse3" class="accordion-body collapse">
<div>
<div class="accordion-inner">body content 3</div>
</div>
</div>
</div>
</body>
자바스크립트
$('div.accordion-body').on('shown', function () {
$(this).parent("div").find(".icon-chevron-down")
.removeClass("icon-chevron-down").addClass("icon-chevron-up");
});
$('div.accordion-body').on('hidden', function () {
$(this).parent("div").find(".icon-chevron-up")
.removeClass("icon-chevron-up").addClass("icon-chevron-down");
});
아니면... 이런 스타일로 하시면 됩니다.
.panel-title a.collapsed {
background: url(../img/arrow_right.png) center right no-repeat;
}
.panel-title a {
background: url(../img/arrow_down.png) center right no-repeat;
}
http://codepen.io/anon/pen/GJjrQN
원라이너.
i.fa.fa-chevron-right.collapse.in { transform: rotate(180deg); }
이 예제에서는 축소 가능한 테이블 행을 그룹화하는 데 사용됩니다.대상 클래스 이름(my-collapse-name)을 아이콘에 추가하기만 하면 됩니다.
<tr data-toggle="collapse" data-target=".my-collapse-name">
<th><i class="fa fa-chevron-right my-collapse-name"></span></th>
<th>Master Row - Title</th>
</tr>
<tr class="collapse my-collapse-name">
<td></td>
<td>Detail Row - Content</td>
</tr>
한 작업을 할 수 .<span class='caret my-collapse-name'></span>그리고.span.caret.collapse.in { transform: rotate(90deg); }
저는 폰트를 사용하고 있습니다! 그리고 접을 수 있는 패널을 원했습니다.
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#collapseOrderItems"><i class="fa fa-chevron fa-fw" ></i> products</div>
<div class="collapse in" id="collapseOrderItems">
....
</div>
</div>
그리고 css
.panel-heading .fa-chevron:after {
content: "\f078";
}
.panel-heading.collapsed .fa-chevron:after {
content: "\f054";
}
Angular는 여기서 자바스크립트 기반 접근법에 문제를 일으키는 것 같습니다. (적어도 제가 시도해 본 것들입니다.) 저는 여기서 이 해결책을 찾았습니다: http://www.codeproject.com/Articles/987311/Collapsible-Responsive-Master-Child-Grid-Using-Ang .그것의 요점은 사용하는 것입니다.data-ng-click을 변경하는 .$scope맥락.
좀 더 자세히 말씀드릴 수 있을 것 같습니다...내 버튼은 접히는 디브의 초기 상태의 글리피콘으로 설정됩니다(글리피콘-트리프론-오른쪽 == 접힌 디브).
page.vmdknowledge:
<div class="title-1">
<button data-toggle="collapse" data-target="#panel-{{ p_idx }}" class="dropdown-toggle title-btn glyphicon glyphicon-chevron-right" data-ng-click="collapse($event)"></button>
</div>
<div id="panel-{{ p_idx }}" class="collapse sect">
...
</div>
컨트롤러.js:
.controller('PageController', function($scope, $rootScope) {
$scope.collapse = function (event) {
$(event.target).toggleClass("glyphicon-chevron-down glyphicon-chevron-right");
};
)
아코디언이 아닌 패널에서만 이 코드를 사용하려면 다음 코드를 사용하십시오.
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapse-toggle" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Panel heading with title</a>
</h4>
</div>
<div id="collapseExample" class="panel-collapse collapse in">
<div class="panel-body">
Panel content
</div>
</div>
</div>
템플릿을 통해 즉시 추가된 HTML을 접고 확장하고 싶었기 때문에 순수한 HTML 접근 방식을 원했습니다!내가 생각해낸 것은...
https://jsfiddle.net/3mguht2y/1/
var noJavascript = ":)";
누군가에게 유용할 수 있는 것:)
언급URL : https://stackoverflow.com/questions/18325779/bootstrap-3-collapse-show-state-with-chevron-icon
반응형
'source' 카테고리의 다른 글
| Gulp.js 작업, src로 돌아옵니까? (0) | 2023.08.05 |
|---|---|
| 루프 증가/감소에 대한 a가 하나 이상 증가할 수 있습니까? (0) | 2023.08.05 |
| Android:문자열을 날짜로 변환하려면 어떻게 해야 합니까? (0) | 2023.08.05 |
| 반환 문자열 유형 열 값을 버퍼 배열(MariaDB)로 후속 처리 (0) | 2023.08.05 |
| 선택기 "my-app"이(가) 어떤 요소와도 일치하지 않습니다. (0) | 2023.07.31 |