jQuery slideUp 动画显示更多内容

Question

我在自学 jquery 似乎是在从事这个项目的时候。

我认为有一种非常简单的方法可以实现这种技术，但我搜索了高低，没有运气。这是我们正在查看的页面：

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

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

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

2. 如果一个是打开的，当你点击另一个时，第一个会关闭。

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

我现在遇到的问题：

一个。当一个打开而第一个已经打开时，它会关闭第一个，但是底部 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'});
        }
    });

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