5

我正在尝试向具有下拉菜单的手风琴添加一个按钮，但它似乎不起作用：

1）按钮太大，所以它超过了手风琴标题。2）下拉菜单最终在手风琴标题/组内，而不是在其他所有内容之上。

解决这些问题的最佳方法是什么？我想

以下是我的手风琴组代码：

<accordion-group is-open="true">
    <accordion-heading>
        <div class="btn-group" style="float:right;">
            <button type="button" class="btn btn-info">Info</button>
        </div>   
    </accordion-heading>
</accordion-group>

这篇文章很相似，但我希望按钮位于标题的右侧，而不是在文本旁边，这就是为什么我有一个 float:left 的原因。

Angular UI 手风琴在标题部分带有按钮

4

3 回答 3

4

s.alem's上面有一个很好的例子，但是当我将它转换为 angularjs 1.3 时，我遇到了问题。

主要是，我注意到在 ng-click 中应用了 $event.stopPropagation() 的非下拉按钮在单击时不断重新加载页面。

玩了一会儿之后，我意识到既然下拉按钮工作正常，为什么不在需要的地方将常规按钮视为下拉按钮。解决方案是从下拉版本中添加两个属性指令（下拉、下拉切换）并将它们分别放入常规按钮组中。

我使用了 s.alem 的示例并将其修改为 1.3 和 ui.bootstrap 0.12，并在手风琴正文中制作了一堆带有注释的示例。我希望这有帮助。我仍然想在 1.3.x 中使用普通按钮而不使用下拉按钮，但现在这可行......

这是我的 plnkr 代码

<div class="pull-right btn-group btn-group-xs" dropdown>
  <button type="button" class="btn btn-success btn-xs" dropdown-toggle ng-click="mdc.clickToAdd();$event.stopPropagation();">Good</button>
  <button class="btn btn-danger btn-xs" ng-click="mdc.clickToAdd();$event.stopPropagation();">bad</button>
</div>
于 2015-02-06T22:06:36.533 回答
3

检查我的Plunker。有一些关于在 angular.ui github 问题上添加“dropdown-append-to-body”的讨论。但在那之前，这应该可以解决问题：

.panel-group .panel {
      overflow: visible;
}

float:right;此外，您可以使用pull-right引导程序中的类来代替。按钮组也有大小调整类，例如btn-group-xs btn-group-sm. 您应该检查引导组件。

于 2014-07-01T03:39:24.737 回答
0

我的解决方案：

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
        <div class="row">
            <div class="col-lg-2">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Titel
                    </a>
                </h4>
            </div>
            <div class="col-lg-10">
                <button class="glyphicon glyphicon-pencil pull-right"></button>
            </div>
        </div>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
            <h1>Inhalt</h1>
        </div>
    </div>
</div>

于 2015-10-14T14:56:38.073 回答