[javascript] Twitter Bootstrap 축소 파일에 열기 / 닫기 아이콘 추가 (아코디언)

Question 1

간단한 아코디언 :
http://jsfiddle.net/darrenc/cngPS/

현재 아이콘은 아래쪽을 가리 키지 만 아이콘 의 클래스를 다음과 같이 변경하기 위해 구현해야하는 JS가 무엇인지 아는 사람이 있습니까?

<i class="icon-chevron-up"></i>

… 확장 되면 위를 가리키고 접었을 때 다시 아래로 토글됩니다 .

Question 2

여기에 부트 스트랩 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");
});

아코디언 예 :

Bootply 아코디언 예

Question 3

다음은 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>

Question 4

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");
    });
});

Question 5

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

스크린 샷

JSBin에서 어떻게 나타나는지

Question 6

@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().

Question 7

최고의 코드는 다음과 같습니다.

  $('#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");
      });

Question 8

관심이있는 사람은 이벤트 이름을 변경했기 때문에 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');
});

예제의 클래스 이름을 귀하의 경우에 사용하는 이름으로 변경하면됩니다.