1

Доброго времени суток! Такая проблема со скриптом - в первый раз скрипт отрабатывает нормально, но если второй раз нажать показать все, блок сначала раскрывается и тут же закрывается. В чем может быть проблема?
Сам скрипт:

$('.more-refs').on('click', function(){
  var height2 = $('.trr').height() > $('.trl').height()
     ? $('.trr').outerHeight(true) : $('.trl').outerHeight(true);
  $('#mpa-refs').animate({'height': height2+5}, 800, function(){
    $('.more-refs').text('свернуть').attr('class', 'less-refs');

    $('.less-refs').on('click', function(){
      $('#mpa-refs').animate({'height':'500px'}, 800, function(){
        $('.less-refs').text('показать все').attr('class', 'more-refs');
      });
    });
  });
});

Пояснение - в блоке есть две таблицы, я нахожу с большей высотой и раскрываю блок на высоту этой таблицы

4
  • @woland, на будущее - чтобы отформатировать код, выделите его мышью и нажмите на кнопку {} редактора
    – user3545
    20 апр 2013 в 12:54
  • добавьте разметку html и желательно сделайте jsfiddle пример.
    – zb'
    20 апр 2013 в 16:00
  • 1
    Наверно это из-за того, что на тексте на момент второго нажатия висит сразу два обработчика, которые срабатывают в порядке навешивания. Это происходит потому, что после: $('.more-refs').text('свернуть').attr('class', 'less-refs'); Текст является элементом двух классов: more-refs и less-refs. Как-то так, извините, нет времени тестировать, но долго никто Вам не отвечает, поэтому пусть хоть такая наводка будет.
    – ReinRaus
    20 апр 2013 в 16:05
  • jsfiddle.net/FYPtU
    – woland
    20 апр 2013 в 16:44

1 ответ 1

2

Всё из-за того что событие навешивается на элемент а не на селектор, чтобы повесить на селектор используйте .on в стиле устаревшего .live:

$(document).on('click', '.more', function () {
    var height = $('.srr').height() > $('.srl').height() ? $('.srr').outerHeight(true) : $('.srl').outerHeight(true);
    $('#search_results').css({
        'ovreflow': 'visible'
    }).animate({
        'height': height + $('.srl').position().top + 5
    }, 800, function () {

        $('.more').text('свернуть').attr('class', 'less');

    });
});
$(document).on('click', '.less', function () {
    $('#search_results').css({
        'overflow': 'hidden'
    }).animate({
        'height': '200px'
    }, 800, function () {
        $('.less').text('показать все').attr('class', 'more');
    });
});

http://jsfiddle.net/oceog/FYPtU/1/

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.