问题描述
当我使用这些地址file：/// C：/Users/h/Desktop/test/a.html#cs，file：/// C：/ Users / h / Desktop / test / a .html＃chgd或file：/// C：/Users/h/Desktop/test/a.html#wmnh我希望他们在标题和Web浏览器顶部框架之间以空白显示（请带一个
When I use these address "file:///C:/Users/h/Desktop/test/a.html#cs", "file:///C:/Users/h/Desktop/test/a.html#chgd" or "file:///C:/Users/h/Desktop/test/a.html#wmnh" I would like them to display with white space between the title and web browsers top frame (please take a look at the picture).
相同的请求结果应该适用于Firefox，IE和Chrome。
Same requested result should be working for Firefox, IE and Chrome.
img src =https://i.stack.imgur.com/GHyyG.pngalt =输入图片说明here>>
<html>
<head>
<title></title>
<link href="bootstrap-theme.css" rel="stylesheet"/>
<link href="bootstrap.css" rel="stylesheet"/>
<script src="jquery-1.11.2.min.js"></script> <script src="bootstrap.min.js"></script>
<script>
jQuery(document).ready(function() {
var url = document.location.toString();
if ( url.match('#') ) {
var hash = url.split('#')[1];
// collapse the expanded panel
$('#accordion .accordion-collapse').removeClass('in');
// expand the requested panel
$('#' + hash + '_c').addClass('in');
}
});
</script>
</head>
<body> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br>
<div id="accordion" class="accordion-group">
<div class="panel">
<h4 id="cs" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#cs_c">Child Survival: Boosting Immunity and Managing Diarrhoea</a></h4>
<div id="cs_c" class="accordion-collapse collapse in">
<p>...</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
</div>
<h4 id="chgd" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#chgd_c">Child Health, Growth and Development: Preventing Mental Impairment with Iodine and Iron</a></h4>
<div id="chgd_c" class="accordion-collapse collapse">
<p>...</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
</div>
<h4 id="wmnh" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#wmnh_c">Women’s and Newborn Survival and Health: Iron Supplementation and Food Fortification</a></h4>
<div id="wmnh_c" class="accordion-collapse collapse">
<p>...</p>
<p>ccccc</p>
<p>ccccc</p>
<p>ccccc</p>
<p>ccccc</p>
<p>ccccc</p>
<p>ccccc</p>
<p>ccccc</p>
<p>ccccc</p>
<p>ccccc</p>
<p>ccccc</p>
<p>ccccc</p>
<p>ccccc</p>
<p>ccccc</p>
<p>ccccc</p>
<p>ccccc</p>
<p>ccccc</p>
<p>ccccc</p>
<p>ccccc</p>
<p>ccccc</p>
<p>ccccc</p>
<p>ccccc</p>
<p>ccccc</p>
<p>ccccc</p>
<p>ccccc</p>
<p>ccccc</p>
<p>ccccc</p>
<p>ccccc</p>
<p>ccccc</p>
<p>ccccc</p>
<p>ccccc</p>
</div>
</div>
</div>
</body> </html>
推荐答案
我在本地复制代码，带有CDN链接的JS文件
I copied your code locally and replaced the local CSS and JS files with CDN links
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
之后
$('#' + hash + '_c').addClass('in');
我添加了
setTimeout(function() {
window.scrollBy(0,-10);
},0);
（展开所需的面板后，使用 scrollBy ）以向上滚动10像素为例，但是，你需要让浏览器完成更新页面布局之前调用scrollBy，这可以通过setTimeout实现零延迟）。
(After you expand the desired panel, use scrollBy(0,-10) to scroll up by 10 pixels for example. However, you need to let the browser finishing updating the page layout before invoking scrollBy. This can be achieved using setTimeout with a zero delay).
这对我来说是有效的，虽然有时我需要刷新页面，让你的手风琴代码第一。
This works here for me, although sometimes I need to refresh the page to get your accordion code to kick in in the first place.
这篇关于标题和Web浏览器之间的空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！