Содержание .slideDown () ниже переходов (не изменчиво)

Question

Итак, я пишу простую страницу, на которой я хочу иметь возможность сдвигать контент вниз при нажатии кнопки. К сожалению, это также вызывает некоторые проблемы с кнопкой, расположенной под скользящим содержимым. Когда я нажимаю первую кнопку, чтобы сдвинуть содержимое вниз, оно работает нормально. Как только я нажимаю 2-ю кнопку, она перемещает первый контент вверх, а 2-й вниз и вызывает некоторые прыжки с помощью кнопки ниже.

$('#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");
});

css для style.css:

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

какой-то другой скрипт, который изменяется:

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

Все вышеперечисленное может просто уйти.

EDIT

Я добавил код, который упомянул в комментарии, чтобы кнопки не работали, если щелкнуть выбранный элемент. Вероятно, это не самое элегантное решение, но оно работает. Я добавляю класс 1, 2 или 3 в зависимости от того, на каком элементе щелкнули мышью, и удаляю все из них одним щелчком мыши.

Answer 2

Проблема здесь в том, что 3 делителя #brz, #slv и #gld не заключены в div, что будет препятствовать перемещению кнопки ниже, поскольку она всегда имеет одинаковую высоту независимо от движениясодержимого внутри него.

try:

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

значение [some height] должно быть равно любой необходимой вам высоте, чтобы на нее не влияли изменениясодержимое внутри div.