我目前在使用 JQuery 展开和折叠部分时遇到问题;固定位置 div 不允许我更改在某些浏览器中查看的内容。
以前当我没有 mainBlock 和 titleBlock div 时它似乎工作正常,如果我删除固定位置线问题就会消失,但是我的 div 没有按我希望的方式布置是。
正如我之前所说,这只是某些浏览器中的问题:它似乎在 Firefox 中运行良好,但在 Chrome 或 IE 中却不行。我不确定我需要为每个浏览器更改什么才能使其正常工作(在 JSfiddle 中似乎也能正常工作)
JavaScript:
jQuery(document).ready(function () {
$(".collapse").click(function () {
$(this).next().toggle();
$(this).find('span').toggleClass("ui-icon-triangle-1-s");
}).next().hide();
});
CSS:
.collapse span {
display:inline-block;
}
#titleBlock {
position: fixed;
right: 10px;
left: 10px;
top:10px;
height: 90px;
z-index: 0;
}
#mainBlock {
position: fixed;
right: 10px;
left: 10px;
top:110px;
bottom: 10px;
overflow-y: scroll;
z-index: -1;
}
HTML:
<div id="titleBlock">
<h1>Title</h1>
<h2>Author <span style="float:right;">DD/MM/YYYY</span></h2>
</div>
<div id="mainBlock">
<h2 id="S1">Section 1</h2>
<p>Non-hidden text</p>
<h2 id="S1_1" class="collapse"><span class="ui-icon ui-icon-triangle-1-e"></span>Section 1.1</h2>
<p>Hidden Text </p>
</div>
最佳答案
似乎是 z-index 导致了问题。
#titleBlock {
position: fixed;
right: 10px;
left: 10px;
top:10px;
height: 90px;
z-index: 0;
}
#mainBlock {
position: fixed;
right: 10px;
left: 10px;
top:110px;
bottom: 10px;
overflow-y: scroll;
z-index: 1;
}
因为 mainBlock 是背景,所以我无法点击它。
关于jquery - 在固定位置 div 中扩展文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28020851/