使用AngularJS和Bootstrap collapse实现折叠功能

Question

我正在尝试在我的Angular应用程序中包含下面的Bootstrap可折叠面板。但是，当我点击“展开”时，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>

- bookthief

Answer 1

如同类似问题这里提到的那样，只需将href更改为data-target属性即可。

<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>

- GuillaumeA

---

这是可行的。但是你还应该添加一个空的 href 属性，这样当鼠标悬停在链接上时，浏览器才会显示手型光标。 - HoffZ

我也遇到了同样的问题。给出的解决方案阻止了重定向到主页，但现在问题是列表不再展开或折叠。有人能帮忙吗？ - Praburaj

它根本不起作用。我遇到了与@prabu相同的问题。 - Jay Momaya

这个可以，谢谢兄弟。。但是只适用于静态内容。 - Abijith Ajayan

Answer 2

你可以使用来自AngularJS UI Bootstrap的手风琴指令，它是在Twitter Bootstrap折叠指令的基础上构建的。 示例：

 <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/

- Alex Choroshin

Answer 3

我遇到了同样的问题，但我不想在Bootstrap之外再添加其他库。按照推荐，您可以使用data-target="#your-collapsing-element"，完全删除href属性。

基础知识

要使面板折叠，您需要：

1. On the element used to trigger collapse:

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

2. On the element that collapses:

   id="my-collapsing-element"
   

3. On the element wrapping both the "trigger" element and the 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类添加自己的样式，可以覆盖Bootstrap的.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>

- Benson

Answer 4

1. 将所有用于展开/折叠的href更改为data-target。
2. data-target和要展开/折叠的div的id不应包含连字符。

- Tejaswini Kadu

Answer 5

点击以下按钮以通过类更改显示和隐藏另一个元素：

• collapse 隐藏内容

• collapsing 应用于转换期间

• 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>

- Kondal