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结构，那么我可能会发布更有用的答案。

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

1 个答案: