在加载外部内容时切换div来打开和关闭

Question

我想要构建一个菜单，当单击一个菜单项时，div将动画到400px的高度，然后加载新内容。

当点击一个新的菜单项，箱子将要设置动画的高度为0，清除旧的内容，加载新的内容，然后动画回400

我已经开始高度具有切换功能的代码，但我有点卡住加载部分，以及如何将它合并到代码中。

这里是我到目前为止

$('.menu').toggle(function(){ 
    $('.opened').animate({height: 0, opacity: 0}, 1000).removeClass('opened'); 
    $('#bodyContent').animate({height: 400, opacity: 1}, 1000).addClass('opened'); 

    }, 
function(){ 
    $('#bodyContent').animate({height: 0, opacity: 0}, 1000).removeClass('opened'); 
}); 

HTML

<a href="#" id="test">test</a> 
<a href="#" id="test2">test2</a> 

加载内容

$('#test').click(function() { 
     $('#bodyContent').load('test.html'); 
    }); 

    $('#test2').click(function() { 
     $('#bodyContent').load('test2.html'); 
    }); 

如果我能有一些帮助，这将是伟大的！

感谢

编辑：

这里是我的HTML内容

<div id="bodyMenuWrapper"> 
    <ul id="menu"> 
    <li><a href="#" id="test" class="menu">TEST</a></li> 
    <li><a href="#" id="test2" class="menu">TEST 2</a></li> 
    </ul> 
</div> 
<div id="bodyContent"> 
    CONTENT LOAD HERE    
</div> 

Answer 1

这是，到目前为止，还未经证实。但我认为以下应该工作：

$('a').click(
    function(){ 
     var id = this.id; 
     $('#bodyContent').animate({'height' : '0'},500, 
      function(){ 
       $(this).load(this.id + '.html', 
        function(){ 
         $('#bodyContent').animate({'height': '400px'},500); 
        }); 
      }); 
    }); 

如果您可以发布您的html结构，那么我可能会发布更有用的答案。