我在为这个项目工作时正在教自己jquery。
我认为有一种非常简单的方法来实现这种技术，但我已经搜索了高低，没有运气。这是我们正在查看的页面：
http://igs.link-networkonline.com/campaign-landing-page/
中间的三个拉起菜单就是我们正在看的东西。他们差不多完成了，我只是需要帮助修复一些错误。
当标签向上滑动时，标签下方的div向下滑动。这很可能是因为我使用负面定位来更多菜单......我不知道还能做什么！
如果一个打开，当您点击另一个时，第一个关闭。
这些问题非常接近完成，它们只是没有按用户期望的方式运行，并且代码变得相当笨重以保持在标题中。
我现在遇到的问题：
一个。当一个打开而第一个打开时，它会关闭第一个，但是底部div上使用的负边距会增加太多，导致底部div干扰上面的内容。
湾在初始打开/关闭切换之后，需要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'});
});
});
非常感谢任何想法或方向。提前感谢您的知识！
答案 0 :(得分：0)
一种简单的方法是动画，例如.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'});
}
});
请注意，这不是如何真正解决这类问题的方法，但它有效..