Bootstrap + AngularJS + jQuery - 嵌套面板「崩潰」行爲失敗

我正在嘗試嵌套手風琴panels哪些工作。但是，如果panel-body爲collapsed，並且panel-body爲not collapsed時指向右側，我希望chevron icon指向（fa-chevron-down）。我寫了一個directive來獲得這個效果，它也行得通。但是，當我將此指令應用於nested panel時，它在nested和parentpanel-heading上都起作用。我究竟做錯了什麼？有沒有更乾淨的方法來做到這一點？Bootstrap + AngularJS + jQuery - 嵌套面板「崩潰」行爲失敗

(function() { 
 
      'use strict'; 
 
    
 
      angular 
 
       .module('myApp', []) 
 
       .directive('bsCollapse', bsCollapse); 
 

 
      function bsCollapse() { 
 
       var $ = window.$; 
 
       
 
      var directive = { 
 
        restrict: 'EA', 
 
        link: linkFunc, 
 
       }; 
 

 
       return directive; 
 

 
       function linkFunc(scope, el, attr, ctrl) { 
 
        $(el[0]) 
 
         .on('hide.bs.collapse', function (evt) { 
 
           $(evt.currentTarget) 
 
            .prev() 
 
            .children() 
 
            .children() 
 
            .removeClass('fa-chevron-down') 
 
            .addClass('fa-chevron-right'); 
 
         }) 
 
         .on('show.bs.collapse', function (evt) { 
 
           $(evt.currentTarget) 
 
            .prev() 
 
            .children() 
 
            .children() 
 
            .removeClass('fa-chevron-right') 
 
            .addClass('fa-chevron-down'); 
 
         }); 
 
       } 
 
      } 
 
})();

<!DOCTYPE html> 
 
<html lang="en" ng-app="myApp"> 
 

 
    <head> 
 
    <meta charset="utf-8"> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 

 
    </head> 
 

 
    <body> 
 

 
    <div class="container"> 
 
     <!-- PARENT PANEL GROUP --> 
 
     <div class="panel-group col-sm-6 col-sm-offset-3" id="accordion"> 
 

 
     <!-- PARENT PANEL --> 
 
     <div class="panel panel-default"> 
 
      <!-- PARENT PANEL HEADING --> 
 
      <div class="panel-heading" data-parent="#accordion" data-target="#collapseOne" data-toggle="collapse" role="button"> 
 
      <h4 class="panel-title"> 
 
       PARENT PANEL HEADING 
 
       <i class="fa fa-chevron-down fa pull-right"></i> 
 
      </h4> 
 
      </div> 
 
      <!-- PARENT PANEL COLLAPSE BODY --> 
 
      <div bs-collapse class="panel-collapse collapse in" id="collapseOne" role="tabpanel"> 
 
      <div class="panel-body"> 
 
       <!-- NESTED PANEL GROUP --> 
 
       <div class="panel-group" id="accordion2"> 
 
       <!-- NESTED PANEL --> 
 
       <div class="panel panel-default"> 
 
        <!-- NESTED PANEL HEADING --> 
 
        <div class="panel-heading" data-parent="#accordion2" data-target="#nestedCollapseOne" data-toggle="collapse" role="button"> 
 
        <h4 class="panel-title"> 
 
         NESTED PANEL HEADING 
 
         <i class="fa fa-chevron-down fa pull-right"></i> 
 
        </h4> 
 
        </div> 
 
        <!-- NESTED PANEL COLLAPSE BoDY --> 
 
        <div bs-collapse class="panel-collapse collapse in" id="nestedCollapseOne" role="tabpanel"> 
 
        <div class="panel-body"> 
 
         NESTED PANEL BODY.... 
 
        </div> 
 
        </div> 
 

 
       </div> 
 
       </div> 
 

 
      </div> 
 
      </div> 
 

 
     </div> 
 

 

 

 
     </div> 
 

 

 
    </div> 
 

 
    <!-- JS Assets --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
    
 
    </body> 
 

 
</html>

我試着在下面的答覆中提到的方法。 scope, flag，並且遇到了快速打開和關閉panel/accordion時出現問題的問題。請參閱sreenshots - 它們來自您提供的plnkr。不過謝謝。

來源

2015-11-27 Akash

在兩個面板的圖標會受到影響，因爲在事件中的$是在兩個元件同時被觸發。我編輯了代碼並在腳本中添加了幾行代碼，並使用了更容易的angularjs'ng-class。這裏是一個蹦極demo。希望能幫助到你。

scipt.js：

scope.flag1 = true; 
scope.flag2=true; 
scope.parentDiv = function() { 
    scope.flag1 = !scope.flag1; 
}; 
scope.nestedDiv = function() { 
    scope.flag2= !scope.flag2; 
};

HTML：

<h4 class="panel-title"> 
    PARENT PANEL HEADING 
<i ng-class="{'fa fa-chevron-down': flag1, 'fa fa-chevron-right': !flag1}" class="pull-right"></i> 
     </h4> 

<h4 class="panel-title"> 
    NESTED PANEL HEADING 
<i ng-class="{'fa fa-chevron-down': flag2, 'fa fa-chevron-right': !flag2}" class="pull-right"></i> 
       </h4>

來源

2015-11-27 05:28:15 rraman

謝謝。但是，這個解決方案對我來說不起作用，主要是因爲快速點擊，'類名'會變得不合時宜...... – Akash

我找到了一個CSS解決這個。謝天謝地，Bootstrap將collapsed類拋入panel-heading。從那裏我可以添加這個樣式，它將chevron-right添加到:before僞類。此外，這不需要指令或AngularJS代碼。

感謝您的計算器參考這個：

Use Font Awesome Icons in CSS

div.panel-heading i { 
 
    position: relative; 
 
} 
 
div.panel-heading.collapsed i:before { 
 
    content: "\f054"; 
 
    font-family: FontAwesome; 
 
}

<!DOCTYPE html> 
 
<html lang="en" ng-app="myApp"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 

 
</head> 
 

 
<body> 
 

 
    <div class="container"> 
 
    <!-- PARENT PANEL GROUP --> 
 
    <div class="panel-group col-sm-6 col-sm-offset-3" id="accordion"> 
 

 
     <!-- PARENT PANEL --> 
 
     <div class="panel panel-default"> 
 
     <!-- PARENT PANEL HEADING --> 
 
     <div class="panel-heading" data-parent="#accordion" data-target="#collapseOne" data-toggle="collapse" role="button"> 
 
      <h4 class="panel-title"> 
 
       PARENT PANEL HEADING 
 
       <i class="fa fa-chevron-down fa pull-right"></i> 
 
      </h4> 
 
     </div> 
 
     <!-- PARENT PANEL COLLAPSE BODY --> 
 
     <div bs-collapse class="panel-collapse collapse in" id="collapseOne" role="tabpanel"> 
 
      <div class="panel-body"> 
 
      <!-- NESTED PANEL GROUP --> 
 
      <div class="panel-group" id="accordion2"> 
 
       <!-- NESTED PANEL --> 
 
       <div class="panel panel-default"> 
 
       <!-- NESTED PANEL HEADING --> 
 
       <div class="panel-heading" data-parent="#accordion2" data-target="#nestedCollapseOne" data-toggle="collapse" role="button"> 
 
        <h4 class="panel-title"> 
 
         NESTED PANEL HEADING 
 
         <i class="fa fa-chevron-down fa pull-right"></i> 
 
        </h4> 
 
       </div> 
 
       <!-- NESTED PANEL COLLAPSE BoDY --> 
 
       <div bs-collapse class="panel-collapse collapse in" id="nestedCollapseOne" role="tabpanel"> 
 
        <div class="panel-body"> 
 
        NESTED PANEL BODY.... 
 
        </div> 
 
       </div> 
 

 
       </div> 
 
      </div> 
 

 
      </div> 
 
     </div> 
 

 
     </div> 
 

 

 

 
    </div> 
 

 

 
    </div> 
 

 
    <!-- JS Assets --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 

 
</body> 
 

 
</html>

來源

2015-11-27 08:32:18 Akash

Bootstrap + AngularJS + jQuery - 嵌套面板「崩潰」行爲失敗

回答

相關問題