Question

我目前在使用JQuery扩展和折叠部分时遇到问题;固定位置div不允许我改变在某些浏览器中查看过的内容。

之前当我没有mainBlock和titleBlock div时似乎运行正常，如果我移除固定位置线，问题就会消失，但是我的div并没有列出我的＃＆＃ 39; d喜欢他们。

正如我之前所说，这在某些浏览器中只是一个问题：它似乎在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>

Answer 1

似乎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是背景，所以我无法使用它。

在固定位置div中扩展文本

1 个答案: