[英]html accordion shows panel-heading not panel-title
I have this structure in my website: 我的网站中有以下结构:
<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>
So when I press collpase hyperlink from previous page, next page jumps with panel-body collapsed in top of screen. 因此,当我按上一页中的collpase超链接时,下一页将跳转,面板主体折叠在屏幕顶部。 I want it to jump with panel-title centred on top of the screen.
我希望它以屏幕顶部居中的面板标题跳转。 How can I do that?
我怎样才能做到这一点? Javascript code:
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');
}
}); });
When I click in first page on hyperlink item, it throws to the second page and shows 1st image in browsers top position. 当我单击超链接项目的第一页时,它会跳到第二页,并在浏览器的顶部位置显示第一个图像。 The thing I wanna do is to show 2nd image in browsers top position.
我想做的是在浏览器的最高位置显示第二张图片。 The idea is that I have list with multiple items and when I click in first page, I can't see the title of list, only the body.
这个想法是我有包含多个项目的列表,当我单击第一页时,我看不到列表的标题,只能看到正文。 I need to scroll up a bit to see the title.
我需要向上滚动才能看到标题。 Image1 Image2
图片1图片 2
First page 第一页
<article class="style5">
<span class="image">
<img src="pictureOFitem" alt="" />
</span>
<a href="SecondPage.html#collapseOne">
<h2>Info</h2>
</a>
</article>
I mean this by saying "browsers top position" Image3 我的意思是说“浏览器顶部位置” Image3
I think that sould do the work: 我认为该做的工作:
First page: 第一页:
<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>
Second Page: 第二页:
<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>
EDIT: To auto display the collapse part, you can use in your second page: 编辑:要自动显示折叠部分,您可以在第二页中使用:
<script>
$(function() {
$('#title .collapse').addClass('show');
});
</script>
Or with collapse effect: 或具有崩溃效果:
<script>
$(function() {
setTimeout(function() {
$('#title [data-toggle="collapse"]').click();
},1000);
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.