data-parent = "＃accordion" not working

Question

私は、特定のトピックをクリックするとトグルする必要があり、関連する質問リストが現れるはずのシナリオがあります。折り畳み可能なアイテムの1つが表示されている私はアコーデオンを使いました。

HTML：

<ul id="accordion"> 
    <li ng-repeat="topics in oJdDetails.topics" class="topic-li" data-toggle="collapse" data-target="{{'#'+topics + $index}}" data-parent="#accordion" ng-click="fngetQList(topics,$index)"> 
     <p class="topics-p"> {{topics}}</p> 
     <ul id="{{topics + $index}}" class="collapse topic-li"> 
      <li ng-repeat="value in aQuestionList">{{value.quesList.quesListName}}</li> 
     </ul> 
    </li> 
</ul> 

はJavaScript：

$scope.fngetQList = function(topics, index) { 
     debugger; 
     $scope.displayQList = true; 
     $scope.sTopics = topics; 
     $scope.index = index; 
     getCandidateInterviewListService.fnGetQList(topics).then(function(response) { 
      $scope.aQuestionList = response; 
      console.log($scope.aQuestionList); 
     }); 
    }; 

ここでのトピックは、応答として来ていると私は崩壊 の動的IDを作っていますが、ここでアコーディオンが機能していません。

特定のトピックをクリックすると、以前開いていた注文トピックは閉じず、問題は理解できません。

ご協力いただければ幸いです。

Answer 1

ここでは例を挙げませんが、イベント "show.bs.collapse"を使用してアコーディオンをクリックすると起動できます。クリックすると、クラスがあるアコーディオンを閉じることができます。クリックしてアコーディオンをクリックします開く。デモ以下を参照してください：

$('#accordion .collapse').on('show.bs.collapse', function (e) { 
 
alert("Open clicked accordian but hide others(already opened)"); 
 
     $('#accordion .in').collapse('hide'); 
 
    });

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
 
    <div class="panel panel-info"> 
 
     <div class="panel-heading " role="tab" id="headingOne"> 
 
      <h4 class="panel-title"> 
 
       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#1" aria-expanded="true" aria-controls="collapseOne"> 
 
       1 
 
       </a> 
 
      </h4> 
 
     </div> 
 
     <div id="1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
 
      <div class="panel-body"> 
 
       Panel body data 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-info"> 
 
     <div class="panel-heading" role="tab" id="headingTwo"> 
 
      <h4 class="panel-title"> 
 
       <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#2" aria-expanded="false" aria-controls="collapseTwo"> 
 
        2 
 
       </a> 
 
      </h4> 
 
     </div> 
 
     <div id="2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
 
      <div class="panel-body"> 
 
       Panel body data 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-info"> 
 
     <div class="panel-heading" role="tab" id="headingThree"> 
 
      <h4 class="panel-title"> 
 
       <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#3" aria-expanded="false" aria-controls="collapseThree"> 
 
        3 
 
       </a> 
 
      </h4> 
 
     </div> 
 
     <div id="3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
 
      <div class="panel-body"> 
 
       Panel body data 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div>