使用带有 angularjs 的引导折叠

Posted 2023-02-19

【中文标题】使用带有 angularjs 的引导折叠

【英文标题】：Using bootstrap collapse with angularjs

【发布时间】：2014-02-21 13:26:57

【问题描述】：

我正在尝试在我的 Angular 应用程序中包含以下引导可折叠面板。但是，当我单击“展开”时，angular 似乎看到href="#collapseOne"，然后重定向到主页而不是折叠面板。我的路由看起来像这样，我认为otherwise(redirectTo: '/home'); 导致了问题。有什么建议吗？

angular.module('App')
.config(['$routeProvider', function($routeProvider)  
$routeProvider.
  when('/users', templateUrl: 'partials/users/user-list.html', controller: 'UserCtrl').
  when('/users/new', templateUrl: 'partials/users/user-new.html', controller: 'UserNewCtrl').
  when('/users/:userid', templateUrl: 'partials/users/user-detail.html', controller: 'UserDetailCtrl').


  otherwise(redirectTo: '/home');
]);

面板-

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Expand
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        ...
      </div>
    </div>
  </div>
  </div>

【参考方案1】：

正如在类似问题Here 中提到的，只需通过 data-target 属性更改您的 href

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a href="javascript:;" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
          Expand
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        ...
      </div>
    </div>
  </div>
</div>

【讨论】：

这行得通。但是您还应该添加一个空的 href 以使浏览器在鼠标放在链接上时显示手形指针

我遇到了同样的问题。给定的解决方案停止重定向到主页，但现在的问题是列表现在没有展开或折叠。谁能帮忙？

它根本不起作用。我面临同样的问题，如@prabu

这行得通，谢谢兄弟。但仅适用于静态内容。

【参考方案2】：

您可以使用来自AngularJS UI Bootstrap 的手风琴指令，该指令建立在 twitter 引导折叠指令之上。

示例：

 <accordion >
    <accordion-group heading="Static Header, initially expanded" is-open="true">
      This content is straight in the template.
    </accordion-group>
 </accordion>

现场示例：http://jsfiddle.net/choroshin/U89bW/3/

【参考方案3】：

我遇到了同样的问题，我不想在引导程序之外添加额外的库。按照建议，您可以使用data-target="#your-collapsing-element"，完全删除href 属性。

基础知识

要使面板折叠，您需要：

关于用于触发折叠的元素：

data-toggle="collapse" data-target="#my-collapsing-element"

在折叠的元素上：

id="my-collapsing-element"

在包裹“触发”元素和折叠元素的元素上：

class="panel"

把它们放在一起

您可以选择添加父元素以使其成为组的一部分，并将 css 类“collapse in”添加到折叠元素以使其默认状态关闭。一个完整的例子：

<div id="accordion">
    <div class="panel">
        <a data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
            Heading 1
        </a>
        <div id="collapse1">
            Content for panel 1
        </div>
    </div>
    <div class="panel">
        <a data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
            Heading 2
        </a>
        <div id="collapse2" class="collapse in">
            Content for panel 2
        </div>
    </div>
</div>

您可以通过使用<button> 元素而不是<a> 来获得更好的按钮行为。可以通过为 panel css 类添加自己的样式来覆盖 .panel 的引导程序样式。

<div class="panel its-my-panel">

.panel.its-my-panel 
  margin-bottom: 0;
  background-color: transparent;
  border: none;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;

.my-panel-heading 
  cursor: pointer;

/* Overrides for .panel--theonly required bootstrap class */

.panel.my-panel-overrides 
  margin-bottom: 0;
  background-color: transparent;
  border: none;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="accordion">
  <div class="panel my-panel-overrides">
    <a class="my-panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
        Collapsible Group 1</a>
    <div id="collapse1" class="collapse in">
      Content for panel 1
    </div>
  </div>
  <div class="panel my-panel-overrides">
    <a class="my-panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
        Collapsible Group 2</a>
    <div id="collapse2" class="collapse">
      Content for panel 2
    </div>
  </div>
  <div class="panel my-panel-overrides">
    <a class="my-panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse3">
        Collapsible Group 3</a>
    <div id="collapse3" class="collapse">
      Content for panel 3
    </div>
  </div>
</div>

【参考方案4】：

更改所有href，以便展开-折叠为data-target。 要展开和折叠的div 中的data-target 和id 不应包含连字符。

【参考方案5】：

单击下面的按钮可通过类更改显示和隐藏另一个元素：

折叠隐藏内容

折叠在过渡期间应用

collapse.in 显示内容

您可以使用带有 href 属性的链接，或带有 data-target 属性的按钮。在这两种情况下，data-toggle="collapse" 都是必需的。

查看下面的示例。

Bootsrap Example

<div class="panel-group" id="accordion">
   <div class="panel panel-default">
      <div class="panel-heading">
      <h4 class="panel-title">
       <a href="javascript:;" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
        Expand
       </a>
     </h4>
   </div>
   <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
    ...
   </div>
 </div>