붕괴되지 않는 부트 스트랩 붕괴

(트위터) 부트 스트랩이 포함 된 페이지가 있습니다. 이 페이지에서 나는 완벽하게 작동하는 아코디언이 있으며 그 아코디언 안에 접을 수있는 div가 있습니다.붕괴되지 않는 부트 스트랩 붕괴

<div class="accordion" id="checkListAccordion"> 
<div ng-repeat="item in items" class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#checkListAccordion" href="#collapse{{item.$$hashKey}}">{{item.name}}</a>  
    </div> 
    <div id="collapse{{item.$$hashKey}}" class="accordion-body collapse"> 
     <div class="accordion-inner"> 
      <div class="container-fluid"> 
       <div class="row-fluid"> 
        <div class="badges span12"> 
         <span class="badge badge-info" data-toggle="collapse" data-target=".info{{item.$$hashKey}}"><i class="icon-info-sign icon-white"></i></span> 
         <div class="info{{item.$$hashKey}} collapse in"> 
          {{item.info}} 
         </div> 
        </div> 
       </div> 
       <div class="row-fluid"> 
        <div class="span12"> 
         some text 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

이제

나는 정보 배지를 클릭하면, 해당 클래스 사업부가 열려 접는 : 아래의 코드를 참조하십시오. 하지만 다시 클릭 할 때 절대로 다시 폴드하지 않습니다. 내가 navbar와 navbar-inner에서 감쌀 때에 만, 그것은 뒤로 접는다. ... 물론, 나는 그것을 원하지 않는다.

어떤 도움이 필요합니까? 내가 코드에 controler를 추가 할 때

출처

2013-05-30 Bas Slagter

내가 그것을 작동하는 것 같다 하드 클래스 이름과 코드를하려고 할 때 :

가 BTW 당신은 UI 부트 스트랩 (http://angular-ui.github.io/bootstrap/) 참조를 사용할 생각이 HTTP 참조 : // bootply. co.kr/62667. '{{item. $$ hashKey}}'가 올바르게 설정되어 있습니까? –

기이 한 ... 주변 리피터를 제거하면 (아코디언 항목이 ng 반복으로 만들어 짐) 모든 것이 잘 작동한다는 것을 알 수 있습니다. 심지어 여러 항목을 하드 코딩 할 때도 마찬가지입니다. 더 많은 것을 설명하기 위해 html을 업데이트했습니다. –

ng-repeat에는 다른 범위가 있습니다. 참조 : http://stackoverflow.com/questions/16854463/jquery-addclass-doesnt-work-in-twitter-bootstrap-carousel-which-using-ng-repeat 사용해야합니다. .in 클래스 추가/삭제를위한 클릭 이벤트. –

모두가 예상대로 작동하는 것 같다 :

angular.module('plunker',[]); 
function AccordionDemoCtrl($scope) { 
    $scope.oneAtATime = true; 

    $scope.items = [ 
    { 
     name: "Dynamic Group Header - 1", 
     info: "Dynamic Group Body - 1" 
    }, 
    { 
     name: "Dynamic Group Header - 2", 
     info: "Dynamic Group Body - 2" 
    } 
    ]; 


}

참조 또한 : http://plnkr.co/nX4kvMThA0bYwcbXZS7t가 사용하는 버전에 문제가있을 것입니다 될 수 있습니까? jQuery 1.9.1, Twitter Bootstrap 2.3.1 및 angularJS 1.0.7을 사용했습니다 (Angular JS Bootstrap Accordian Example 참조). http://plnkr.co/u7l6nrkPZM8ZJtA08RNP (Howto set template variables in Angular UI Bootstrap? (accordion) 대답 winkerVSbecks 덕분에)

출처

2013-06-01 22:40:19

도움 주셔서 감사합니다. 내 자신의 CSS 중 일부가 나를 속이고 있다는 것이 밝혀졌습니다. 접을 수있는 div는 토글 버튼이 열렸을 때 토글 버튼 위에 위치했습니다. 그러므로 나는 더 이상 div를 밀어 넣을 수있는 버튼을 클릭 할 수 없습니다. 그것은 의미가 있습니다. 그렇지 않습니다. 내 잘못이야. –

잘 작동합니다. 나도 angleJS와 UI 부트 스트랩에 대해 많이 배웠다. –

붕괴되지 않는 부트 스트랩 붕괴

답변

관련 문제