data-parent =「＃accordion」不工作

我有一個場景，當我點擊特定主題和相關問題列表時，需要切換，並且我還想在顯示其中一個可摺疊項目時關閉我用手風琴。data-parent =「＃accordion」不工作

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爲崩潰但這裏的手風琴是行不通的。

當我點擊特定主題時，之前打開的訂單主題未關閉，我不理解此問題。

任何幫助，將不勝感激。

來源

2016-07-21 Shikha thakur

我不能在這裏給出角度的例子，但你可以使用事件「show.bs.collapse」點擊任何手風琴，點擊你可以關閉那些有class .in的手風琴，然後你點擊的手風琴將會打開。請看下面的演示：

$('#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>

來源

2016-07-21 09:52:22

data-parent =「＃accordion」不工作

回答

相關問題