javascript - jQuery - 水平 Accordion onClick

Question

我正在尝试编写一种非常简单的水平 Accordion 之类的东西。

我有三个“横幅”div 和三个“区域”div，所以当我点击横幅时，相应的区域理想情况下应该设置动画以允许宽度变为自动，高度从最小高度变为自动如果需要的话。

到目前为止，我的代码在我的网站上运行良好，但在 jfiddle 上却不行，这让我相信在 jfiddle 输入中犯了一个愚蠢的错误:

http://jsfiddle.net/r8tvetr7/

$(document).ready(function(){
  $("#second_line_accordian_banner_one").click(function(){
    $("#second_line_accordian_area_two").animate({width:"0px"}, "fast");
    $("#second_line_accordian_area_three").animate({width:"0px"}, "fast");
    $("#second_line_accordian_area_one").animate({width:"300px"}, "slow", swing);
  });
});

$(document).ready(function(){
  $("#second_line_accordian_banner_two").click(function(){
    $("#second_line_accordian_area_one").animate({width:"0px"}, "fast");
    $("#second_line_accordian_area_three").animate({width:"0px"}, "fast");
    $("#second_line_accordian_area_two").animate({width:"300px"}, 2000, swing);
  });
});

$(document).ready(function(){
  $("#second_line_accordian_banner_three").click(function(){
    $("#second_line_accordian_area_two").animate({width:"0px"}, "fast");
    $("#second_line_accordian_area_one").animate({width:"0px"}, "fast");
    $("#second_line_accordian_area_three").animate({width:"300px"}, 1000, swing);
  });
});

谢谢，

Answer 1

DEMO

$(document).ready(function(){
  $("#second_line_accordian_banner_one").click(function(){
    $("#second_line_accordian_area_two").animate({width:"0px"}, "fast"),
    $("#second_line_accordian_area_three").animate({width:"0px"}, "fast"),
    $("#second_line_accordian_area_two").css( {'display':'none'}),
    $("#second_line_accordian_area_three").css( {'display':'none'}),
    $("#second_line_accordian_area_one").css( {'display':'block'}),
    $("#second_line_accordian_area_one").animate({width:"300px"}, "slow");
  }),

  $("#second_line_accordian_banner_two").click(function(){
    $("#second_line_accordian_area_one").animate({width:"0px"}, "fast"),
    $("#second_line_accordian_area_three").animate({width:"0px"}, "fast"),
    $("#second_line_accordian_area_one").css({ 'display':'none'}),
    $("#second_line_accordian_area_three").css( {'display':'none'}),
    $("#second_line_accordian_area_two").css( {'display':'block'}),
        $("#second_line_accordian_area_two").animate({ width:"300px"},600);
  }),

  $("#second_line_accordian_banner_three").click(function(){
    $("#second_line_accordian_area_two").animate({width:"0px"}, "fast"),
    $("#second_line_accordian_area_one").animate({width:"0px"}, "fast"),
    $("#second_line_accordian_area_one").css( {'display':'none'}),
    $("#second_line_accordian_area_two").css( {'display':'none'}),
    $("#second_line_accordian_area_three").css( {'display':'block'}),
    $("#second_line_accordian_area_three").animate({ width:"300px"},600);
  });
});