jquery - 滑动iframe隐藏div

Question

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

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

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

谢谢， 和Sandeep

我附上了我想要的演示版面。

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>

---- ---- EDIT

附在页面底部的浮动栏：

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

如果您想在iframe显示时隐藏此“浮动div”，只需将以下内容添加到javascript代码中（右侧使用其他slideUp / slideDown代码）：

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