javascript - jquery - 滑动 iframe 隐藏一个 div

Question

我的页面有左侧菜单和带有链接的右侧内容。 单击内容中的链接时，我需要一个 iframe 加载链接中的内容并出现，以便它覆盖具有内容的右侧 div。

此 iframe 应在不需要时最小化，并且应该像底部栏一样可见，始终 float ，当到达页面底部时，它应该在页脚栏上方可见。

任何人都可以建议我如何做到这一点。如果提供示例会更好。

谢谢， 桑迪普

我附上了我想要的演示布局。

Answer 1

如果您使用包含的 div 构建右侧内容，并在该 div 中创建一个嵌套的 div 来保存您的常规内容和一个 iframe；然后你可以为你的链接设置点击处理程序，它将隐藏嵌套的 div 并显示 iframe:

$(document).ready(function() {
    $('#inner_div > a').live('click', function() {
        $('#inner_div').slideUp();//just an example animation, you can set whatever attributes you would like with jquery, like just change the height with .css({height: '0px'})
        $('#iframe_id').slideDown();
    });
});
<div id="outer_div">
    <div id="inner_div">
        <a href="some_link.html" target="iframe_id">Link Text</a>
    </div>
    <iframe id="iframe_id" style="display:none;"></iframe>
</div>

----编辑----

至于附在页面底部的 float 条:

<div id="floating_footer" style="position: absolute; bottom: 0px; right: 0px; width: 90%; height: 50px; background-color:#069;"></div>

如果您想在 iframe 显示时隐藏此“ float div”，只需将以下代码添加到 javascript 代码(与其他 slideUp/slideDown 代码一起):

$('#floating_footer').slideUp();