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

【问题标题】：Toggle div to open and close while loading external content在加载外部内容时切换 div 以打开和关闭
【发布时间】：2012-03-04 04:56:55
【问题描述】：

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

当一个新的菜单项被点击时，该框将动画到高度 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>

【问题讨论】：

标签： jquery load toggle

【解决方案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 结构，那么我可以发布更有用的答案。

【讨论】：

添加了 HTML 内容。我会测试一下。