Tôi đã thiết lập phiên bản đơn giản này của đàn accordion Bootstrap :
Đàn accordion đơn giản: http://jsfiddle.net/darrenc/cngPS/
Hiện tại biểu tượng chỉ trỏ xuống , nhưng có ai biết JS cần được triển khai để thay đổi lớp của biểu tượng thành:
<i class="icon-chevron-up"></i>
... để nó hướng lên khi được mở rộng và chuyển đổi trở lại xuống dưới một lần nữa khi thu gọn, và như vậy thứ tư?
Câu trả lời:
Đây là câu trả lời cho những ai đang tìm kiếm giải pháp trong Bootstrap 3 (như tôi).
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
<span class="glyphicon glyphicon-minus"></span>
</button>
</div>
<div id="demo" class="collapse in">Some dummy text in here.</div>
$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
Đây là cách tiếp cận của tôi cho Bootstrap 2.x. Nó chỉ là một số css. Không cần JavaScript:
.accordion-caret .accordion-toggle:hover {
text-decoration: none;
}
.accordion-caret .accordion-toggle:hover span,
.accordion-caret .accordion-toggle:hover strong {
text-decoration: underline;
}
.accordion-caret .accordion-toggle:before {
font-size: 25px;
vertical-align: -3px;
}
.accordion-caret .accordion-toggle:not(.collapsed):before {
content: "▾";
margin-right: 0px;
}
.accordion-caret .accordion-toggle.collapsed:before {
content: "▸";
margin-right: 0px;
}
Chỉ cần thêm lớp accordion-caret vào div của nhóm accordion, như sau:
<div class="accordion-group accordion-caret">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
<strong>Header</strong>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Content
</div>
</div>
</div>
Bootstrap Collapse có một số Sự kiện mà bạn có thể phản ứng với:
$(document).ready(function(){
$('#accordProfile').on('shown', function () {
$(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up");
});
$('#accordProfile').on('hidden', function () {
$(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down");
});
});
Sử dụng bộ chọn giả CSSes: sau khi sử dụng Glyphicons tích hợp của Bootstrap 3 để có câu trả lời không có JS với sửa đổi nhỏ đối với HTML của bạn ...
CSS
.panel-heading [data-toggle="collapse"]:after
{
font-family: 'Glyphicons Halflings';
content: "\e072"; /* "play" icon */
float: right;
color: #b0c5d8;
font-size: 18px;
line-height: 22px;
/* rotate "play" icon from > (right arrow) to down arrow */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.panel-heading [data-toggle="collapse"].collapsed:after
{
/* rotate "play" icon from > (right arrow) to ^ (up arrow) */
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
HTML
Thêm class="collapsed"vào bất kỳ thẻ neo nào được đóng theo mặc định.
Điều này sẽ biến các neo chẳng hạn như
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
thành
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
CodePen Live Ví dụ
http://codepen.io/anon/pen/VYobER
Ảnh chụp màn hình
Đã thêm vào câu trả lời @muffls để điều này hoạt động với tất cả twitter bootstrap thu gọn và thực hiện thay đổi đối với mũi tên trước khi bắt đầu hoạt ảnh.
$('.collapse').on('show', function(){
$(this).parent().find(".icon-chevron-left").removeClass("icon-chevron-left").addClass("icon-chevron-down");
}).on('hide', function(){
$(this).parent().find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-left");
});
Tùy thuộc vào cấu trúc HTML của bạn, bạn có thể cần sửa đổi parent().
Tôi nghĩ mã tốt nhất là:
$('#accordion1').collapse({
toggle: false
}).on('show',function (e) {
$(e.target).parent().find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up");
}).on('hide', function (e) {
$(e.target).parent().find(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down");
});
Nếu ai đó quan tâm, đây là cách bạn thực hiện với BS3 vì họ đã thay đổi tên sự kiện:
$('.collapse').on('show.bs.collapse', function(){
var i = $(this).parent().find('i')
i.toggleClass('fa-caret-right fa-caret-down');
}).on('hide.bs.collapse', function(){
var i = $(this).parent().find('i')
i.toggleClass('fa-caret-down fa-caret-right');
});
Bạn chỉ cần thay đổi tên lớp trong ví dụ thành những tên bạn sử dụng trong trường hợp của mình.
Giải pháp chỉ CSS dễ đọc nhất có lẽ sẽ là sử dụng thuộc tính mở rộng aria. Hãy nhớ rằng bạn sẽ cần thêm aria-expand = "false" vào tất cả các phần tử thu gọn vì điều này không được đặt khi tải (chỉ khi nhấp chuột đầu tiên).
<h2 data-toggle="collapse" href="#collapseId" aria-expanded="false">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="glyphicon glyphicon-chevron-down"></span> Title
</h2>
h2[aria-expanded="false"] span.glyphicon-chevron-down,
h2[aria-expanded="true"] span.glyphicon-chevron-right
{
display: none;
}
h2[aria-expanded="true"] span.glyphicon-chevron-down,
h2[aria-expanded="false"] span.glyphicon-chevron-right
{
display: inline;
}
Hoạt động với Bootstrap 3.x.
Đây là giải pháp của tôi được cải tiến thêm từ giải pháp được đăng bởi @ john-magnolia và giải quyết một số vấn đề của nó
/**
* Toggle on/off arrow for Twitter Bootstrap collapsibles.
*
* Multi-collapsible-friendly; supports several collapsibles in the same group, on the same page.
*/
function animateCollapsibles() {
$('.collapse').on('show', function() {
var $t = $(this);
var header = $("a[href='#" + $t.attr("id") + "']");
header.find(".icon-chevron-right").removeClass("icon-chevron-right").addClass("icon-chevron-down");
}).on('hide', function(){
var $t = $(this);
var header = $("a[href='#" + $t.attr("id") + "']");
header.find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-right");
});
}
Và đây là ví dụ đánh dấu:
<div class="accordion" id="accordion-send">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-send" href="#collapse-refund">
<i class="icon icon-chevron-right"></i> Send notice
</a>
</div>
<div id="collapse-refund" class="accordion-body collapse">
<div class="accordion-inner">
<p>Lorem ipsum Toholampi city</p>
</div>
</div>
</div>
</div>
Giải pháp bootstrap v3 (trong đó các sự kiện có tên khác nhau), cũng chỉ sử dụng một bộ chọn jQuery (như được thấy ở đây ):
$('.accordion').on('hide.bs.collapse show.bs.collapse', function (n) {
$(n.target).siblings('.panel-heading').find('i.glyphicon').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});
Đây là cách tôi làm điều đó mà không có bất kỳ js.
Tôi đã sử dụng biểu tượng glyphicon-tam giác-phải nhưng nó hoạt động với bất kỳ biểu tượng nào khác, những gì nó làm là nó áp dụng xoay 90 độ cho biểu tượng khi bảng điều khiển đang mở hoặc không. Tôi đang sử dụng Bootstrap 3.3.5 cho cái này.
Mã CSS
h4.panel-title a {
display: block;
}
h4.panel-title a.collapsed .glyphicon-triangle-right {
color: #ada9a9 !important;
transform: rotate(0deg);
}
h4.panel-title a .glyphicon-triangle-right {
color: #515e64 !important;
transform: rotate(90deg);
}
Đây là cấu trúc HTML được lấy từ ví dụ Bootstrap
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Proven Expertise
<span class="glyphicon glyphicon-triangle-right pull-right" aria-hidden="true"></span>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
Không có cách nào ở trên phù hợp với tôi nhưng tôi đã nghĩ ra cái này và nó hoạt động:
function toggleChevron(el) {
if ($(el).find('i').hasClass('icon-chevron-left'))
$(el).find('.icon-chevron-left').removeClass("icon-chevron-left").addClass("icon-chevron-down");
else
$(el).find('.icon-chevron-down').removeClass("icon-chevron-down").addClass("icon-chevron-left");
}
Triển khai HTML:
<div class="accordion" id="accordion-send">
<div class="accordion-group">
<div class="accordion-heading" onClick="toggleChevron(this)">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-send" href="#collapse-refund">
<i class="icon icon-chevron-right"></i> Send notice
</a>
...
@RobSadler:
RE Martin Wickman's CSS phiên bản duy nhất ...
Bạn có thể giải quyết vấn đề đó bằng cách đặt accordion-caret vào thẻ neo và đặt cho nó một lớp thu gọn theo mặc định. Như vậy:
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle accordion-caret collapsed" data-toggle="collapse" href="#collapseOne">
<strong>Header</strong>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Content
</div>
</div>
Điều đó đã làm việc cho tôi.
Đối với Bootstrup 3.2 + FontAwesome
$(document).ready(function(){
$('#accordProfile').on('shown.bs.collapse', function () {
$(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-up");
});
$('#accordProfile').on('hidden.bs.collapse', function () {
$(".fa-chevron-up").removeClass("fa-chevron-up").addClass("fa-chevron-down");
});
});
Đôi khi bạn phải viết như vậy. Nếu vậy
$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');
Được tạo tự động (lớp = "thu gọn"), khi bạn nhấn menu ẩn.
ps khi bạn cần tạo menu cây
Điều này đã được giải đáp bằng nhiều cách nhưng những gì tôi nghĩ ra là đơn giản và dễ dàng nhất đối với tôi với Bootstrap 3 và phông chữ tuyệt vời. tôi vừa làm
$('a.toggler').on('click', function () {$('i', this).toggleClass('fa-caret-up');});
Điều này chỉ chuyển đổi lớp CSS của biểu tượng mà tôi muốn hiển thị. Tôi thêm các lớp toggler đến mục Tôi muốn áp dụng điều này để. Điều này có thể được thêm vào bất kỳ mục nào bạn muốn chuyển đổi một biểu tượng.
Một giải pháp không javascript khác sử dụng chính chức năng thu gọn:
/* Prevent block display and transition animation */
.expand-icon.collapse.in,
.collapse-icon.collapse.in {
display: inline; }
.expand-icon.collapsing {
display: none; }
/* HTML Toggler with glyphicons */
<a data-toggle="collapse" href=".my-collapse">
<span class="my-collapse collapse-icon collapse in">
<span class="glyphicon glyphicon-collapse-up"></span>
</span>
<span class="my-collapse expand-icon collapse">
<span class="glyphicon glyphicon-expand"></span>
</span>
</a>
Đối với giải pháp chỉ có CSS (và không có biểu tượng) bằng Bootstrap 3, tôi đã phải thực hiện một chút thao tác dựa trên câu trả lời của Martin Wickman ở trên.
Tôi đã không sử dụng ký hiệu accordion- * vì nó được thực hiện với các bảng trong BS3.
Ngoài ra, tôi phải đưa vào HTML ban đầu aria-expand = "true" trên mục đang mở khi tải trang.
Đây là CSS tôi đã sử dụng.
.accordion-toggle:hover { text-decoration: none; }
.accordion-toggle:hover span, .accordion-toggle:hover strong { text-decoration: underline; }
.accordion-toggle:before { font-size: 25px; }
.accordion-toggle[data-toggle="collapse"]:before { content: "+"; margin-right: 0px; }
.accordion-toggle[aria-expanded="true"]:before { content: "-"; margin-right: 0px; }
Đây là HTML đã khử trùng của tôi:
<div id="acc1">
<div class="panel panel-default">
<div class="panel-heading">
<span class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" aria-expanded="true" data-parent="#acc1" href="#acc1-1">Title 1
</a>
</span>
</div>
<div id=“acc1-1” class="panel-collapse collapse in">
<div class="panel-body">
Text 1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<span class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#acc1” href=“#acc1-2”>Title 2
</a>
</span>
</div>
<div id=“acc1-2” class="panel-collapse collapse">
<div class="panel-body">
Text 2
</div>
</div>
</div>
</div>
Câu trả lời ngắn nhất có thể.
HTML
<a data-toggle="collapse" data-parent="#panel-quote-group" href="#collapseQuote">
<span class="toggle-icon glyphicon glyphicon-collapse-up"></span>
</a>
JS:
<script type="text/javascript">
$(function () {
$('a[data-toggle="collapse"]').click(function () {
$(this).find('span.toggle-icon').toggleClass('glyphicon-collapse-up glyphicon-collapse-down');
})
})
</script>
Và tất nhiên, bạn có thể sử dụng bất kỳ thứ gì cho bộ chọn thay vì thẻ liên kết avà bạn cũng có thể sử dụng bộ chọn cụ thể thay vì thisnếu biểu tượng của bạn nằm bên ngoài phần tử được nhấp của bạn.
Đây là một giải pháp tạo một phần có thể mở rộng bằng cách sử dụng thiết kế hơi material design, bootstrap 4.5 / 5 alpha và hoàn toàn không phải javascript.
Tạo kiểu cho phần đầu
<style>
[data-toggle="collapse"] .fa:before {
content: "\f077";
}
[data-toggle="collapse"].collapsed .fa:before {
content: "\f078";
}
</style>
Html nội dung
<div class="pt-3 pb-3" style="border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; cursor: pointer;">
<a href="#expandId" class="text-dark float-right collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="expandId">
<i class="fa" aria-hidden="false"></i>
</a>
<a href="#expandId" class="text-dark collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="expandId">Expand Header</a>
<div class="collapse" id="expandId">
CONTENT GOES IN HERE
</div>
.bs.collapse. Tôi cũng đã thay đổishown and hidden to show and hideđể hoạt ảnh xảy ra trước khi đàn accordion mở ra.