以下のbootstrap折りたたみパネルを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>
同様の質問 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>
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>
同じ問題があり、ブートストラップ以外にライブラリを追加したくありませんでした。推奨されるように、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
のブートストラップのスタイル設定をオーバーライドするには、panel
cssクラスの独自のスタイル設定を追加します。
<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>
href
を変更して、data-target
に展開/折りたたみます。id
のdata-target
およびdiv
にはハイフンを含めないでください。以下のボタンをクリックして、クラスの変更により別の要素を表示および非表示にします。
collapseはコンテンツを非表示にします
collapsingは遷移中に適用されます
collapse。inはコンテンツを表示します
href属性を持つリンク、またはdata-target属性。どちらの場合も、data-toggle = "collapse"が必要です。
以下の例を確認してください。
<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>