부트 스트랩 접을 수있는 패널, 프로그래밍 방식으로 전환 할 때 제목 아이콘이 업데이트되지 않음

Question

제목에 열림/닫힘 상태를 나타내는 아이콘이있는 부트 스트랩 접을 수있는 패널이 있습니다. 이 아이콘을 직접 클릭하면 정상적으로 작동합니다 (예 : 아이콘이 올바르게 변경됨).

그러나이 패널을 프로그래밍 방식으로 (하이퍼 링크를 클릭하여 트리거 됨) 토글해야하며 패널을 올바르게 열거 나 닫을 때 표제의 아이콘을 업데이트하지 않습니다.

아래 코드에서 열기/닫기 동작을 트리거하는 글리프콘이있는 패널 하나를 만들었습니다. 패널 아래에는 패널의 ID를 나타내는 href 속성이있는 하이퍼 링크도 있습니다. 작은 jQuery 스 니펫은이 하이퍼 링크를 클릭하면 해당 대상 ID의 collapse('toggle') 함수가 호출됩니다. JSFiddle에서 볼 수 있듯이 'Test'하이퍼 링크를 클릭하면 패널이 잘 접히지 만 아이콘은 업데이트되지 않습니다.

아이콘을 클릭하거나 '테스트'하이퍼 링크를 클릭하는 것의 차이점은 아이콘을 클릭하면 요소의 .collapsed 클래스가 토글됨을 나타냅니다. 하이퍼 링크를 클릭해도이 클래스는 토글되지 않습니다.

이 문제는 github (https://github.com/twbs/bootstrap/issues/7213)에서 발견되었습니다.이 문제는 제목 자체 (내 경우에는 아이콘)를 클릭하여 동일한 문제를 일으킨 이전 문제를 언급하고 있지만 문제는 여전히 해결 된 것 같습니다. 프로그래밍 방식으로 패널을 전환하는 데 사용할 수있는 collapse() 함수에 존재합니다.이 또한이 문제 (https://github.com/twbs/bootstrap/pull/7424#issuecomment-20107756)에 대해 수행 된 끌어 오기 작업에서 언급되었습니다. 여기서 @intellix는 이것이 올바르게 작동하지 않는다고 나타내지 만 얻지는 않습니다 누군가에 의해 집어 들었다. (또는 나는 틀린 것으로 해석 할 수도있다. 나는 github의 코멘트/이슈/끌어 오기에 관해서 정말로 익숙하지 않다.).

아직 부트 스트랩의 버그입니까? 아니면 내가 너무 많이 exepcting 오전?

HTML :

<div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <span class="collapseicon clickable accordion-toggle pull-left" data-toggle="collapse" href="#collapseOne"></span> 
     <h4 class="panel-title"> 
      Collapsible Group Item #1 
     </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> 

<a href="#collapseOne">Test</a> 

자바 스크립트 :

$('a').on('click', function() 
      { 
       var HashTag = $(this).attr('href'); 
      $(HashTag).collapse('toggle'); 
      }); 

JSFiddle : http://jsfiddle.net/6f6g536r/2/

Answer 1

내가 부트 스트랩은 토글 기능이 처리됩니다 생각하지 않는다는 - 대신 당신이 시도해야 할 것 이 라인을 따라 뭔가.

$('a').on('click', function() 
{ 
    var HashTag = $(this).attr('href'); 
    $(HashTag).collapse('toggle'); 
    $('.collapseicon[href$="' + HashTag + '"]').toggleClass('collapsed'); 
});