Jquery — запускает функцию, даже если предыдущая функция не была запущена.

#jquery #function #toggle

#jquery #функция #переключение

Вопрос:

Это фрагмент внутри toggle() функции. У меня есть заголовок, который при щелчке заставляет нижеприведенные заголовки скользить вниз, создавая пространство для удаления содержимого выбранных заголовков.

Там все работает нормально, но у меня проблема с заголовком в нижней части стека. Под ней нет заголовка для перемещения вниз, поэтому следующая функция, которая скрывает содержимое, не запускается.

Я хочу сохранить общую структуру заголовков, скользящих вниз, ПОСЛЕ чего запускается функция fade in.

 $(currentHeader).next('li.header')
        .animate({ marginTop: itemHeight   15 }, 1000, function ()
        {
            $(this).prev('ul#work-headers li').find('ul').fadeIn(500);
        });
  

Любая помощь будет высоко оценена.

Ответ №1:

Я бы сказал, что для этого есть 2 решения:

Быстрый и грязный:

Добавьте пустой LI-тег:

 <li class="header" style="display:none;"></li>
  

Или измените код на code, чтобы добавить поле либо к UL, либо к некоторому div после каждой пары LI amp; UL.

Комментарии:

1. Такое грязное решение, но оно сработало. Я только что создал заголовок, не отображая ничего, но вместо того, чтобы оставить его пустым, просто ввел название сайтов. Спасибо за простое решение!

2. Хе-хе хорошо … иногда приятно быстро исправить, а затем заняться более важными / интересными вещами 🙂

Ответ №2:

Я не могу это протестировать, поэтому вам придется разобраться с перегибами, но основная идея заключается в том, чтобы инкапсулировать нужную логику, чтобы ее можно было вызывать отдельно от анимации, которая в некоторых случаях не срабатывает.

 var fadeIn= function(content) {
                    $(content).find('ul').fadeIn(500);
                }  
var next = $(currentHeader).next('li.header');

if(next.length>0) {
    next.animate({ marginTop: itemHeight   15 }, 1000, function ()
        {
            fadeIn($(this).prev('ul#work-headers li'));
        });
}
else {
    fadeIn($(this).find('ul#work-headers li'));
}
  

редактировать — как идея @ Holger, лучше быть честным

Комментарии:

1. я бы тоже не тестировал это, но с использованием свойства length я бы тоже подошел к этому. Спасибо за попытку, и если у меня будет время, я попробую это.