Question

我在角js中使用bootstrap手风琴。面板打开如果我直接点击标题但我需要为每个标题添加加/减符号。请帮助我实现功能，如果我点击加号图标，面板应该打开，如果我点击减号，面板应该关闭。提前谢谢。

抱歉，我无法添加小提琴或插件，因为数据来自我的本地数据库。

＆＃13;

 <uib-accordion close-others="oneAtATime" class="accordion-data">
            <uib-accordion-group heading="title from database" ng-repeat="values are coming from database">
                <div class="row">
                    <div class="col-md-12">
                        <div class="row row-head">
                            <div class="col-md-6 col-xs-6">
                            </div>
                        </div>
                        <div class="row item-head accordion-content" ng-repeat="values are coming from database">
                            <div class="col-md-4 col-xs-4"><input type="checkbox" ng-model="check" >data from database
                            </div>
                            <div class="col-md-8 col-xs-8 service-data">
                                <div class="row">
                                    <div class="col-md-2 col-xs-2"></div>
                                    <div class="col-md-2 col-xs-2">
                                        <input type="number" class="form-data" ng-disabled="!check">
                                    </div>
                                    <div class="col-md-2 col-xs-2">
                                        <input type="number" name="times" class="form-data" ng-disabled="!check">

                                    </div>
                                    <div class="col-md-2 col-xs-2">
                                        <input type="text" class="form-data" ng-disabled="!check" ng-readonly="true" >
                                    </div>
                                    <div class="col-md-2 col-xs-2">
                                        <input type="text" class="form-data" ng-disabled="!check" ng-readonly="true" >
                                    </div>
                                    <div class="col-md-2 col-xs-2">
                                        <input type="text" class="form-data" ng-disabled="!check" ng-readonly="true" >
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </uib-accordion-group>
        </uib-accordion>

＆＃13;

Answer 1

我不了解您的实施细节，但您可以像我在simple fiddle中所做的那样使用CSS :before伪元素。

如果你有办法通过打开/关闭状态选择手风琴标题，那么你可以做类似的事情：

.accordion li.open:before {
  content: '- ';
}
.accordion li.closed:before {
  content: '+ ';
}

Answer 2

glyphicon glyphicon-plus如果您想在javascript中处理此问题，可以使用here所述的collapse事件。

当崩溃元素对用户可见时（<等待CSS过渡完成），

shown.bs.collapse将触发。
当用户隐藏了一个折叠元素时将触发hidden.bs.collapse（将等待CSS转换完成）。

$('#yourCollapseDiv').on('shown.bs.collapse', function () {
   $(".glyphicon").removeClass("glyphicon glyphicon-minus").addClass("glyphicon glyphicon-plus");
});

$('#yourCollapseDiv').on('hidden.bs.collapse', function () {
   $(".glyphicon").removeClass("glyphicon glyphicon-plus").addClass("glyphicon glyphicon-minus");
});

它使用glyphicons来显示+和 -

如何在bootstrap手风琴和angularjs中添加加减号

2 个答案: