带有两个用于关闭的图像的页脚切换答案

【问题标题】：Footer toggle with two images for closing带有两个用于关闭的图像的页脚切换
【发布时间】：2012-03-16 05:10:16
【问题描述】：

感谢您给我机会得到帮助。

我想创建一个切换页脚（滑动面板）。

我发现下面的代码可以正常工作，但我希望能够使用两个不同的按钮关闭页脚：我用来打开的同一图像 (#footer_button) 和另一个放置在内容内的图像 (十字) (#页脚内容）。

我应该如何继续将此图像 (#footer_button_2) 上的相同功能与此代码集成？

提前非常感谢！

这是我使用的代码：

<script type="text/javascript">
jQuery(function($) {
var slide = false;
var height = $('#footer_content').height();
$('#footer_button').click(function() {
    var docHeight = $(document).height();
    var windowHeight = $(window).height();
    var scrollPos = docHeight - windowHeight + height;
    $('#footer_content').animate({ height: "toggle"}, 1000);
    if(slide == false) {
        if($.browser.opera) { //Fix opera double scroll bug by targeting only HTML.
            $('html').animate({scrollTop: scrollPos+'px'}, 1000);
        } else {
            $('html, body').animate({scrollTop: scrollPos+'px'}, 1000);
        }
                           slide = true;
    } else {
                           slide = false;
                   }
});
});
</script>

【问题讨论】：

标签： javascript jquery footer slidetoggle

【解决方案1】：

您可以像在 CSS 中那样用逗号分隔它们：$('#footer_button, #CrossImgID') :)

<script type="text/javascript">
jQuery(function($) {
var slide = false;
var height = $('#footer_content').height();
$('#footer_button, #CrossImgID').click(function() {
    var docHeight = $(document).height();
    var windowHeight = $(window).height();
    var scrollPos = docHeight - windowHeight + height;
    $('#footer_content').animate({ height: "toggle"}, 1000);
    if(slide == false) {
        if($.browser.opera) { //Fix opera double scroll bug by targeting only HTML.
            $('html').animate({scrollTop: scrollPos+'px'}, 1000);
        } else {
            $('html, body').animate({scrollTop: scrollPos+'px'}, 1000);
        }
                           slide = true;
    } else {
                           slide = false;
                   }
});
});
</script>

【讨论】：