6
Mục tiêu là chuyển từ các tab sang thu gọn kiểu accordion khi trang web có chiều rộng nhỏ hơn 676px. Chúng tôi đang sử dụng Bootstrap.Chuyển từ tab sang thu gọn để đáp ứng
Chúng tôi sẽ ẩn các tab ul.nav và a.accordtion-toggle tương ứng với css. Các tab hoạt động ở đây, nhưng a.accordion-toggle không hoạt động. Bất kỳ ý tưởng?
<ul class="nav nav-tabs" id="myTab" data-tabs="tabs">
<li class="active"><a href="#panel1" data-toggle="tab">Panel 1</a></li>
<li class="active"><a href="#panel2" data-toggle="tab">Panel 2</a></li>
</ul>
<a class="accordion-toggle" data-toggle="collapse" data-target="#panel>Panel 1</a>
<div class="tab-pane collapse" id="panel1">
Panel 1 Content
</div>
<a class="accordion-toggle" data-toggle="collapse" data-target="#pane2>Panel 2</a>
<div class="tab-pane collapse" id="panel2">
Panel 2 Content
</div>
<script>
jQuery(document).ready(function ($) {
if (document.documentElement.clientWidth < 767) {
$('#myTab a').click(function (e) {
e.preventDefault();
}
$(".collapse").collapse();
}
});
</script>
Mã dán đã mất tích quote trên các thuộc tính và JS không làm gì cả. Một trong '.accordion-toggle [data-target]' cũng không đầy đủ. – Sherbrow
Bạn có nghĩ đến việc sử dụng plugin thu gọn trong '.nav-tabs' thay vì plugin tab không? – Sherbrow