반응형
Twitter Bootstrap 축소 형 (아코디언)에 열기 / 닫기 아이콘 추가
이 간단한 버전의 Bootstrap 아코디언을 설정했습니다 .
간단한 아코디언 : http://jsfiddle.net/darrenc/cngPS/
현재 아이콘은 아래쪽을 가리 키지 만 아이콘 의 클래스를 다음과 같이 변경하기 위해 구현해야하는 JS가 무엇인지 아는 사람이 있습니까?
<i class="icon-chevron-up"></i>
... 확장 되면 위를 가리키고 접었을 때 다시 아래로 토글됩니다 .
여기에 부트 스트랩 3 (나와 같은)에서 해결책을 찾는 사람들을위한 대답이 있습니다.
HTML 부분 :
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
<span class="glyphicon glyphicon-minus"></span>
</button>
</div>
<div id="demo" class="collapse in">Some dummy text in here.</div>
js 부분 :
$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
아코디언 예 :
다음은 Bootstrap 2.x에 대한 나의 접근 방식입니다. 그것은 단지 CSS입니다. JavaScript가 필요하지 않습니다.
.accordion-caret .accordion-toggle:hover {
text-decoration: none;
}
.accordion-caret .accordion-toggle:hover span,
.accordion-caret .accordion-toggle:hover strong {
text-decoration: underline;
}
.accordion-caret .accordion-toggle:before {
font-size: 25px;
vertical-align: -3px;
}
.accordion-caret .accordion-toggle:not(.collapsed):before {
content: "▾";
margin-right: 0px;
}
.accordion-caret .accordion-toggle.collapsed:before {
content: "▸";
margin-right: 0px;
}
다음 과 같이 accordion-caret 클래스 를 accordion-group div에 추가하십시오.
<div class="accordion-group accordion-caret">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
<strong>Header</strong>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Content
</div>
</div>
</div>
Bootstrap Collapse에는 반응 할 수있는 몇 가지 이벤트가 있습니다.
$(document).ready(function(){
$('#accordProfile').on('shown', function () {
$(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up");
});
$('#accordProfile').on('hidden', function () {
$(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down");
});
});
CSSes pseudo-selector 사용 : HTML을 약간 수정하여 no JS 답변 을 위해 Bootstrap 3의 통합 Glyphicons를 사용한 후 ...
CSS
.panel-heading [data-toggle="collapse"]:after
{
font-family: 'Glyphicons Halflings';
content: "\e072"; /* "play" icon */
float: right;
color: #b0c5d8;
font-size: 18px;
line-height: 22px;
/* rotate "play" icon from > (right arrow) to down arrow */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.panel-heading [data-toggle="collapse"].collapsed:after
{
/* rotate "play" icon from > (right arrow) to ^ (up arrow) */
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
HTML
class="collapsed"기본적으로 닫혀있는 앵커 태그에 추가 합니다.
이것은 다음과 같은 앵커를 돌릴 것입니다.
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
으로
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
CodePen 라이브 예제
http://codepen.io/anon/pen/VYobER
스크린 샷
@muffls 답변에 추가되어 모든 트위터 부트 스트랩 축소와 함께 작동하고 애니메이션이 시작되기 전에 화살표를 변경합니다.
$('.collapse').on('show', function(){
$(this).parent().find(".icon-chevron-left").removeClass("icon-chevron-left").addClass("icon-chevron-down");
}).on('hide', function(){
$(this).parent().find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-left");
});
HTML 구조에 따라 parent().
최고의 코드는 다음과 같습니다.
$('#accordion1').collapse({
toggle: false
}).on('show',function (e) {
$(e.target).parent().find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up");
}).on('hide', function (e) {
$(e.target).parent().find(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down");
});
관심이 있다면 이벤트 이름을 변경했기 때문에 BS3로 수행하는 방법입니다.
$('.collapse').on('show.bs.collapse', function(){
var i = $(this).parent().find('i')
i.toggleClass('fa-caret-right fa-caret-down');
}).on('hide.bs.collapse', function(){
var i = $(this).parent().find('i')
i.toggleClass('fa-caret-down fa-caret-right');
});
예제의 클래스 이름을 귀하의 경우에 사용하는 이름으로 변경하면됩니다.
가장 읽기 쉬운 CSS 전용 솔루션은 아마도 aria-expanded 속성을 사용하는 것입니다. aria-expanded = "false"를 모든 접기 요소에 추가해야합니다. 이는로드시 설정되지 않기 때문입니다 (첫 번째 클릭에서만).
HTML :
<h2 data-toggle="collapse" href="#collapseId" aria-expanded="false">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="glyphicon glyphicon-chevron-down"></span> Title
</h2>
CSS :
h2[aria-expanded="false"] span.glyphicon-chevron-down,
h2[aria-expanded="true"] span.glyphicon-chevron-right
{
display: none;
}
h2[aria-expanded="true"] span.glyphicon-chevron-down,
h2[aria-expanded="false"] span.glyphicon-chevron-right
{
display: inline;
}
Bootstrap 3.x에서 작동합니다.
@ john-magnolia가 게시 한 것에서 추가로 개선되고 일부 문제를 해결하는 내 솔루션이 있습니다.
/**
* Toggle on/off arrow for Twitter Bootstrap collapsibles.
*
* Multi-collapsible-friendly; supports several collapsibles in the same group, on the same page.
*/
function animateCollapsibles() {
$('.collapse').on('show', function() {
var $t = $(this);
var header = $("a[href='#" + $t.attr("id") + "']");
header.find(".icon-chevron-right").removeClass("icon-chevron-right").addClass("icon-chevron-down");
}).on('hide', function(){
var $t = $(this);
var header = $("a[href='#" + $t.attr("id") + "']");
header.find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-right");
});
}
다음은 마크 업의 예입니다.
<div class="accordion" id="accordion-send">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-send" href="#collapse-refund">
<i class="icon icon-chevron-right"></i> Send notice
</a>
</div>
<div id="collapse-refund" class="accordion-body collapse">
<div class="accordion-inner">
<p>Lorem ipsum Toholampi city</p>
</div>
</div>
</div>
</div>
또한 (와 같이 하나의 jQuery 셀렉터를 사용하는 부트 스트랩 V3 용액 (이벤트가 다른 이름을 가질 경우), 여기에 ) :
$('.accordion').on('hide.bs.collapse show.bs.collapse', function (n) {
$(n.target).siblings('.panel-heading').find('i.glyphicon').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});
이것이 내가 js없이하는 방법입니다.
아이콘 glyphicon-triangle-right를 사용했지만 다른 아이콘과 함께 작동합니다. 패널이 열리거나 열리지 않을 때 아이콘에 90도 회전을 적용한다는 것입니다. 나는 이것을 위해 Bootstrap 3.3.5 를 사용하고 있습니다.
CSS 코드
h4.panel-title a {
display: block;
}
h4.panel-title a.collapsed .glyphicon-triangle-right {
color: #ada9a9 !important;
transform: rotate(0deg);
}
h4.panel-title a .glyphicon-triangle-right {
color: #515e64 !important;
transform: rotate(90deg);
}
이것은 부트 스트랩 예제에서 가져온 HTML 구조입니다.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Proven Expertise
<span class="glyphicon glyphicon-triangle-right pull-right" aria-hidden="true"></span>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<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(el) {
if ($(el).find('i').hasClass('icon-chevron-left'))
$(el).find('.icon-chevron-left').removeClass("icon-chevron-left").addClass("icon-chevron-down");
else
$(el).find('.icon-chevron-down').removeClass("icon-chevron-down").addClass("icon-chevron-left");
}
HTML 구현 :
<div class="accordion" id="accordion-send">
<div class="accordion-group">
<div class="accordion-heading" onClick="toggleChevron(this)">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-send" href="#collapse-refund">
<i class="icon icon-chevron-right"></i> Send notice
</a>
...
@RobSadler :
RE Martin Wickman의 CSS 전용 버전 ...
앵커 태그에 아코디언 캐럿을 배치하고 기본적으로 축소 된 클래스를 제공하여이 문제를 해결할 수 있습니다. 이렇게 :
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle accordion-caret collapsed" data-toggle="collapse" href="#collapseOne">
<strong>Header</strong>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Content
</div>
</div>
그것은 나를 위해 일했습니다.
Bootstrup 3.2 + FontAwesome 용
$(document).ready(function(){
$('#accordProfile').on('shown.bs.collapse', function () {
$(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-up");
});
$('#accordProfile').on('hidden.bs.collapse', function () {
$(".fa-chevron-up").removeClass("fa-chevron-up").addClass("fa-chevron-down");
});
});
때로는 그렇게 작성해야합니다. 그렇다면
$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');
숨기기 메뉴를 누르면 자동으로 생성됩니다 (class = "collapsed").
ps 트리 메뉴를 만들어야 할 때
This has been answered by numerous ways but what I came up with was the simplest and easiest for me with Bootstrap 3 and font awesome. I just did
$('a.toggler').on('click', function () {$('i', this).toggleClass('fa-caret-up');});
This just toggles the CSS class of the icon I want to show. I add the class toggler to the item I want to apply this to. This can be added onto any item you want to toggle an icon.
Another no-javascript solution that uses the collapse functionality itself:
/* Prevent block display and transition animation */
.expand-icon.collapse.in,
.collapse-icon.collapse.in {
display: inline; }
.expand-icon.collapsing {
display: none; }
/* HTML Toggler with glyphicons */
<a data-toggle="collapse" href=".my-collapse">
<span class="my-collapse collapse-icon collapse in">
<span class="glyphicon glyphicon-collapse-up"></span>
</span>
<span class="my-collapse expand-icon collapse">
<span class="glyphicon glyphicon-expand"></span>
</span>
</a>
For a CSS-only (and icon-free) solution using Bootstrap 3 I had to do a bit of fiddling based on Martin Wickman's answer above.
I didn't use the accordion-* notation because it's done with panels in BS3.
Also, I had to include in the initial HTML aria-expanded="true" on the item that's open at page load.
Here is the CSS I used.
.accordion-toggle:hover { text-decoration: none; }
.accordion-toggle:hover span, .accordion-toggle:hover strong { text-decoration: underline; }
.accordion-toggle:before { font-size: 25px; }
.accordion-toggle[data-toggle="collapse"]:before { content: "+"; margin-right: 0px; }
.accordion-toggle[aria-expanded="true"]:before { content: "-"; margin-right: 0px; }
Here is my sanitized HTML:
<div id="acc1">
<div class="panel panel-default">
<div class="panel-heading">
<span class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" aria-expanded="true" data-parent="#acc1" href="#acc1-1">Title 1
</a>
</span>
</div>
<div id=“acc1-1” class="panel-collapse collapse in">
<div class="panel-body">
Text 1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<span class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#acc1” href=“#acc1-2”>Title 2
</a>
</span>
</div>
<div id=“acc1-2” class="panel-collapse collapse">
<div class="panel-body">
Text 2
</div>
</div>
</div>
</div>
Shortest possible answer.
HTML
<a data-toggle="collapse" data-parent="#panel-quote-group" href="#collapseQuote">
<span class="toggle-icon glyphicon glyphicon-collapse-up"></span>
</a>
JS:
<script type="text/javascript">
$(function () {
$('a[data-toggle="collapse"]').click(function () {
$(this).find('span.toggle-icon').toggleClass('glyphicon-collapse-up glyphicon-collapse-down');
})
})
</script>
물론 앵커 태그 대신 선택자에 대해 무엇이든 사용할 a수 있으며 this아이콘이 클릭 한 요소 외부 에있는 경우 대신 특정 선택기를 사용할 수도 있습니다 .
반응형
'development' 카테고리의 다른 글
| Javascript에서 정규식 일치 수 계산 (0) | 2020.09.18 |
|---|---|
| IntelliJ IDEA : 줄 이동? (0) | 2020.09.18 |
| Egit이 비 빨리 감기를 거부했습니다. (0) | 2020.09.17 |
| Python-비디오 프레임 추출 및 저장 (0) | 2020.09.17 |
| 음수를 양수로 변환하는 방법? (0) | 2020.09.17 |