javascript - .slideDown() 下面的内容跳转(不流畅)

Question

所以我正在编写一个简单的页面，希望能够在单击按钮时向下滑动一些内容。不幸的是，这也会导致我在滑动内容下方的按钮出现一些问题。当我单击第一个按钮向下滑动内容时，它工作正常。我一单击第二个按钮，它就会向上滑动第一个内容，然后向下滑动第二个内容，并通过下面的按钮引起一些跳跃。

$('#1G').live('click', function(){
$('#slv').slideUp('slow');
$('#gld').slideUp('slow');
$('#brz').slideToggle('slow');

});

$('#2G').live('click', function(){
$('#brz').slideUp('slow');
$('#gld').slideUp('slow');
$('#slv').slideToggle('slow');

});

$('#3G').live('click', function(){
$('#brz').slideUp('slow');
$('#slv').slideUp('slow');
$('#gld').slideToggle('slow');

});

这似乎发生在任何大小的动画上。

举个例子: http://kod.singaming.net/hosting

我尝试在#brz #slv 和#gld 上添加宽度，并且尝试为每个添加高度。

我必须设置一些 css 属性吗？如果我需要解释任何其他内容，请告诉我。

Answer 1

这个新方法使用一个名为 info 的框，使用 .load() 函数将正确的内容加载到其中。

替代 html:

<div id="info" class='pkg'></div> 
<div id="button" class="clearfix"> 

替代脚本:

$('#1G').live('click', function(){
    if ($("#info").hasClass("1")) return false;
    $('#info').removeClass("1 2 3").slideUp('slow', function() {
        $(this).load('_packages/bronze.html')
    }).slideToggle('slow').addClass("1");
});

$('#2G').live('click', function(){
    if ($("#info").hasClass("2")) return false;
    $('#info').removeClass("1 2 3").slideUp('slow', function() {
        $(this).load('_packages/silver.html')
    }).slideToggle('slow').addClass("2");
});

$('#3G').live('click', function(){
    if ($("#info").hasClass("3")) return false;
    $('#info').removeClass("1 2 3").slideUp('slow', function() {
        $(this).load('_packages/gold.html')
    }).slideToggle('slow').addClass("3");
});

style.css 的 css:

#info {
display: none;
overflow: hidden;
height: 120px;
}

其他一些变化的脚本:

$('#brz').load('_packages/bronze.html');
$('#slv').load('_packages/silver.html');
$('#gld').load('_packages/gold.html');

以上都可以消失。

编辑

我添加了我在评论中提到的代码，以防止在单击当前所选元素时按钮起作用。它可能不是最优雅的解决方案，但它确实有效。我根据单击的元素添加类 1、2 或 3，并在单击其他元素时将其全部删除。