Bootstrap + AngularJS + jQuery-嵌套面板“崩溃”行为失败
[英]Bootstrap + AngularJS + jQuery - Nested panels “collapse” behaviour failing
问题描述
我正在尝试嵌套手风琴panels 。 不过，我希望chevron icon点下去（ fa-chevron-down ）时， panel-body的collapsed而当右键点panel-body是not collapsed 。 我写了一个directive来获得这种效果，它也可以工作。但是，当我将此指令应用于nested panel ，它对nested panel-heading和parent panel-heading都起作用。 我究竟做错了什么？ 有没有更清洁的方法可以做到这一点？
(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 。 不过谢谢
2 个解决方案
解决方案1
0 2015-11-27 05:28:15
两个面板中的图标均受到影响是因为两个元素中的$ on事件被同时触发。 我已经编辑了您的代码，并在脚本中添加了几行代码，并使用了angularjs的ng-class，它更加容易。 这是一个小样的演示 。 希望能帮助到你。
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>
解决方案2
0 2015-11-27 08:32:18
我找到了一个CSS解决方案。 值得庆幸的是， Bootstrap抛出了一个collapsed类到panel-heading 。 从那里，我可以添加这种样式，该样式将chevron-right添加到:before伪类中。 另外，这不需要指令或AngularJS代码。
谢谢您stackoverflow参考：
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>
Bootstrap：如何在单击另一个面板时使面板自动折叠？
[英]Bootstrap: How to make panels auto collapse when clicking on another panel?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.