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，并在点击其他内容后删除所有课程。

Answer 2

这里的问题是3个div #brz，#slv和#gld没有包含在div中，这会阻止下面的按钮移动，因为它是无论内部的内容是否移动，总是保持相同的高度。

尝试：

<div style="[some height]">
     // your three content divs
    <div id="brz"></div> 
    <div id="slv"></div> 
    <div id="gld"></div> 
</div>

[some height]应该等于你需要的任何高度，这样它就不会受到div内容变化的影响。

跳过下面的.slideDown（）内容（不流畅）

2 个答案:

修改