javascript - jquery 盲目并在后面暴露子 div？

Question

我正在尝试使用 jquery animate 选项实现滑动 div 的效果。我能够向上“滑动”父 div，但在显示 slider 后面的 div 时遇到问题。

我创建了这个 jsfiddle显示我的问题。

尝试取消注释 photoOptions div。我试图隐藏此 div，以便它仅在父 div 向上滑动时显示。

<div class="photoWrapper">
   <!-- <div class="photoOptions"> This is your data. </div>-->
   <div class="photoHolder">
     Image Here
   </div>
   <div class="photoMeta">More data here</div>
   <div class="photoCredits">
     <a href="#" class="trigger">Trigger</a>
   </div>
</div>

代码

jQuery.fn.blindToggle = function(speed, easing, callback) {
    var h = this.height() + parseInt(this.css('paddingTop')) + parseInt(this.css('paddingBottom'));
    return this.animate({
        marginTop: parseInt(this.css('marginTop')) < 0 ? 0 : -h
    }, speed, easing, callback);
};

$(document).ready(function(){
    $(".trigger").click(function(){
        $('.photoHolder').blindToggle('slow');
    });
});

当前的 CSS:

.photoWrapper {
    width:200px;
    border: solid 1px #ddd;
}
.photoHolder {
    border: solid 1px #eee;
    width:200px;
    height:266px;
}
.photoOptions {
    padding-top: 50px;
    height: 266px;
    width: 200px;
    background: #eee;
    position:absolute;
}

关于如何实现这一点有什么想法吗？

Answer 1

浏览器根据 DOM 中的位置呈现元素，如果一个元素在 dom 中位于另一个元素之前，则它在它下面呈现。

要更改此默认行为，您应该使用 CSS 规则 z-index，方法是在您的 .photoOptions 上定义一个较低的 z-index > div，它将在其下方呈现。

作为seen in this fiddle

另请注意，对于绝对定位的元素，z-index 值的处理方式可能有所不同，因为它们不会在正常流中呈现。