jQuery SlideUp 动画显示更多内容

Question

我在从事这个项目时似乎正在自学 jquery。

我以为会有一种非常简单的方法来实现这种技术，但我到处搜索都没有成功。这是我们正在查看的页面:

http://igs.link-networkonline.com/campaign-landing-page/

中间的三个下拉菜单就是我们正在查看的内容。它们即将完成，我只需要帮助修复一些错误。

1. 当选项卡向上滑动时，选项卡下方的 div 也会向下滑动。这很可能是因为我使用负定位来增加菜单...我不知道还能做什么!

2. 如果其中一个打开，当您单击另一个时，第一个将关闭。

这些问题已经非常接近完成，它们只是没有按照用户期望的方式运行，并且代码变得相当庞大，无法保留在 header 中。

我现在遇到的问题:

a.当一个打开而第一个已经打开时，它会关闭第一个，但底部 div 上使用的负边距会增加太多，导致底部 div 干扰上面的内容。

b.初始打开/关闭切换后，需要单击 2 次才能切换，导致页面感觉损坏。

<小时/>

更新的代码:

$(function() {
    $(".first").toggle(function() {
        $(".first").animate({'height': '295px', 'top': "-220px"});
        $('.first img').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
        $(".second").animate({'height': '75px', 'top': "0px"});
        $(".third").animate({'height': '75px', 'top': "0px"});
        $(".campaign-lower").animate({'margin-top': '-220px'});
        $(".form").animate({'margin-top': '-220px'});

    }, function() {
        $(".first").animate({'height': '75px', 'top': "0px", 'overflow': "hidden"});
        $('.first img').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
        $(".campaign-lower").animate({'margin-top': '0px'})
        $(".form").animate({'margin-top': '0px'});

    });
   $(".second").toggle(function() {
        $(".second").animate({'height': '275px', 'top': "-200px"});
        $('.second img').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
        $(".first").animate({'height': '75px', 'top': "0px"});
        $(".third").animate({'height': '75px', 'top': "0px"});
        $(".campaign-lower").animate({'margin-top': '-200px'});
        $(".form").animate({'margin-top': '-200px'});

    }, function() {
        $(".second").animate({'height': '75px', 'top': "0px"});
        $('.second img').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
        $(".campaign-lower").animate({'margin-top': '0px'});
        $(".form").animate({'margin-top': '0px'});
    });
    $(".third").toggle(function() {
        $(".third").animate({'height': '255px', 'top': "-180px"});
        $('.third img').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
        $(".first").animate({'height': '75px', 'top': "0px"});
        $(".second").animate({'height': '75px', 'top': "0px"});
        $(".campaign-lower").animate({'margin-top': '-180px'});
        $(".form").animate({'margin-top': '-180px'});

    }, function() {
        $(".third").animate({'height': '75px', 'top': "0px"});
        $('.third img').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
        $(".campaign-lower").animate({'margin-top': '0px'});
        $(".form").animate({'margin-top': '0px'});
    });

}); 

非常感谢任何想法或方向。预先感谢您的知识!

Answer 1

实现此目的的一个简单方法是制作动画，例如.first 上的 .second 和 .third 单击以关闭，为 .first 和 .third 设置动画以在 .second 单击时关闭，依此类推...

您可以使用如下方式更改图像:

$('.first img').attr('src','new_source.png');

编辑:

底部的框将保留在该动画中:请注意，这是解决此问题的一种非常不优雅的方法，但它有效:

    $(".first").toggle(function() {
            $(".first").animate({'height': '270px', 'top': "-220px"});
            $(".second").animate({'height': '50px', 'top': "0px"});
            $(".third").animate({'height': '50px', 'top': "0px"});
            $("#bottom").animate({'margin-top': '-220px'});
        }, function() {
            $(".first").animate({'height': '50px', 'top': "0px"});
            $("#bottom").animate({'margin-top': '0px'});
    });

编辑2:

这现在应该对你有用:

var first = false;
var second = false;
var third = false;

    $(".first").click(function() {
        if(!first){
            first = true;
            second = false;
            third = false;
            $(".second").css({'margin-bottom': '0px'});
            $(".third").css({'margin-bottom': '0px'});
            $(".first").animate({'height': '295px', 'top': "-270px"},function() {
                $(".first").css({'margin-bottom': '-220px'});
            });
            $(".second").animate({'height': '75px', 'top': "-58px"});
            $(".third").animate({'height': '75px', 'top': "-58px"});
            $("img.button1").animate({'top': "-235px"});
            $("img.button2").animate({'top': "-25px"});
            $("img.button3").animate({'top': "-25px"});
            $('img.button1').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
            $('img.button2').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
            $('img.button3').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
        } else if(first) {
            first = false;
            second = false;
            third = false;
            $(".first").css({'margin-bottom': '0px'});
            $(".first").animate({'height': '75px', 'top': "-58px"});
            $("img.button1").animate({'top': "-25px"});
            $('img.button1').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
        }
    });
   $(".second").click(function() {
        if(!second){
            first = false;
            second = true;
            third = false;
            $(".first").css({'margin-bottom': '0px'});
            $(".third").css({'margin-bottom': '0px'});
            $(".second").animate({'height': '295px', 'top': "-270px"},function() {
                $(".first").css({'margin-bottom': '0px'});
                $(".second").css({'margin-bottom': '-220px'});
                $(".third").css({'margin-bottom': '0px'});
            });
            $(".first").animate({'height': '75px', 'top': "-58px"});
            $(".third").animate({'height': '75px', 'top': "-58px"});
            $("img.button2").animate({'top': "-240px"});
            $("img.button1").animate({'top': "-25px"});
            $("img.button3").animate({'top': "-25px"});
            $('img.button2').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
            $('img.button1').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
            $('img.button3').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
        } else if(second) {
            first = false;
            second = false;
            third = false;
            $(".second").css({'margin-bottom': '0px'});
            $(".second").animate({'height': '75px', 'top': "-58px"});
            $("img.button2").animate({'top': "-25px"});
            $('img.button2').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
            $("body").animate({'padding-bottom': '0px'});
        }
    });
    $(".third").click(function() {
        if(!third){
            first = false;
            second = false;
            third = true;
            $(".first").css({'margin-bottom': '0px'});
            $(".second").css({'margin-bottom': '0px'});
            $(".third").animate({'height': '295px', 'top': "-270px"},function() {
                $(".third").css({'margin-bottom': '-220px'});
            });
            $(".second").animate({'height': '75px', 'top': "-58px"});
            $(".first").animate({'height': '75px', 'top': "-58px"});
            $("img.button3").animate({'top': "-210px"});
            $("img.button1").animate({'top': "-25px"});
            $("img.button2").animate({'top': "-25px"});
            $('img.button3').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
            $('img.button1').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
            $('img.button2').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
         } else if(third) {
            first = false;
            second = false;
            third = false;
            $(".third").css({'margin-bottom': '0px'});
            $(".third").animate({'height': '75px', 'top': "-58px"});
            $("img.button3").animate({'top': "-25px"});
            $('img.button3').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
            $("body").animate({'padding-bottom': '0px'});
        }
    });

请注意，这不是真正解决此类问题的方法，但它确实有效..