slideToggle двойные слайды с более чем 2 вкладками меню

#jquery #slidetoggle

Вопрос:

Я написал этот код, и он отлично работает, когда есть только 2 меню, но как только появляется 3 или 4, slideToggle дважды скользит (мигает).

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><html><head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {

    $('.menu').hide();

    $('#nav a').click(function(){
        var idvar = this.id;
        var menuid = '#menu_' idvar;
        $('.menu').not(menuid).slideUp( function(){ 
            $(menuid).slideToggle(); 
        });
        return false;
    });
});
</script></head><body>

<div id="nav">
    <a href="#" id="dogs">Dogs</a>
    <a href="#" id="cats">Cats</a>
    <a href="#" id="horses">Horses</a>
    <a href="#" id="cows">Cows</a>
</div>

<div class="menu" id="menu_dogs">stuff about dogs</div>
<div class="menu" id="menu_cats">stuff about cats</div>
<div class="menu" id="menu_horses">stuff about horses</div>
<div class="menu" id="menu_cows">stuff about cows</div>

</body></html>

Просмотрите демонстрацию проблемы: (удалите любые два меню, чтобы увидеть, что оно работает так, как задумано)
http://jsfiddle.net/ANDXJ /

Ответ №1:

Проблема в этой строке:

  $('.menu').not(menuid).slideUp( function(){ 
     $(menuid).slideToggle(); 
 });

Вы говорите, что для каждого пункта меню, который не является текущим, сдвиньте текст вверх, а затем сдвиньте вниз текущий пункт меню. Это выполняется несколько раз. Отсюда и причина, по которой вы получаете несколько вспышек. Вы хотите сделать это один раз. Поэтому разделите его на разные операторы. Сдвиньте все меню вверх. Затем сдвиньте вниз текущую.

Здесь — это должно делать то, что вы хотите.

 $('#nav a').click(function() {
    var idvar = this.id;
    var menuid = '#menu_'   idvar;

    $('.menu').hide();        
    $(menuid).slideDown();
    return false;
});

Ответ №2:

Как сказал мистер Шерман, вы пытаетесь сдвинуть ВСЕ пункты меню, вам нужно сдвинуть только видимый. Чтобы сохранить ваши переходы слайд вверх слайд вниз, мне пришлось добавить немного больше логики. Взгляните на эту скрипку.

1. Спасибо! Этот ответ успешно сохраняет функциональность кнопок для переключения слайда, поэтому, если Cat уже открыт, и я нажимаю кнопку Cat, Cat закрывается.

2. Да, я подумал, что вам это может понадобиться 🙂 Код может потребовать некоторой настройки, но он охватывает все сценарии.