jQuery-水平手風琴onClick

Question

我正在嘗試編寫一種非常簡單的水平手風琴之類的東西。

我有三個“橫幅” 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

您需要在JSFiddle的左側菜單中激活jQuery。

Answer 2

演示

$(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);
  });
});