[英]How to expand/collapse bootstrap accordion on panel-heading click event?
[英]html accordion shows panel-heading not panel-title
我的網站中有以下結構:
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><strong>Title</strong></a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<p> Some collapse info </p>
</div>
</div>
</div>
因此,當我按上一頁中的collpase超鏈接時,下一頁將跳轉,面板主體折疊在屏幕頂部。 我希望它以屏幕頂部居中的面板標題跳轉。 我怎樣才能做到這一點? JavaScript代碼:
$(function(){
// check if there is a hash in the url
if ( window.location.hash != '' )
{
// remove any accordion panels that are showing (they have a class of 'in')
$('.collapse').removeClass('in');
// show the panel based on the hash now:
$(window.location.hash + '.collapse').addClass('in');
}
});
當我單擊超鏈接項目的第一頁時,它會跳到第二頁,並在瀏覽器的頂部位置顯示第一個圖像。 我想做的是在瀏覽器的最高位置顯示第二張圖片。 這個想法是我有包含多個項目的列表,當我單擊第一頁時,我看不到列表的標題,只能看到正文。 我需要向上滾動才能看到標題。 圖片1圖片 2
第一頁
<article class="style5">
<span class="image">
<img src="pictureOFitem" alt="" />
</span>
<a href="SecondPage.html#collapseOne">
<h2>Info</h2>
</a>
</article>
我的意思是說“瀏覽器頂部位置” Image3
我認為該做的工作:
第一頁:
<article class="style5">
<span class="image">
<img src="pictureOFitem" alt="" />
</span>
<a href="SecondPage.html#title"><!--Pay attention to the id-->
<h2>Info</h2>
</a>
</article>
第二頁:
<div id="title">
<div id="accordion"><!-- You forgot this one in your post -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-controls="collapseOne"><strong>Title</strong></a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<p> Some collapse info </p>
</div>
</div>
</div>
</div>
</div>
編輯:要自動顯示折疊部分,您可以在第二頁中使用:
<script>
$(function() {
$('#title .collapse').addClass('show');
});
</script>
或具有崩潰效果:
<script>
$(function() {
setTimeout(function() {
$('#title [data-toggle="collapse"]').click();
},1000);
});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.