2

К тому же, если убрать animate scrollTop, то приходится делать еще и третий клик

function f() {

$('.unit').click(function(){
if ($(this).css('max-height')=='50px') {
        $(this).css('max-height','10000px');

	    $(this).css('transition','max-height 1.0s ease-in-out');
		$('html, body').stop().animate({ scrollTop: $(this).offset().top - 150 }, 1000);
} else {
	    $(this).css('max-height','50px');

	    $(this).css('transition','max-height 0.2s ease-in-out');
	    $('html, body').stop().animate({ scrollTop: $(this).offset().top - 150 }, 100);

}
});
}
.unit {
overflow: hidden;
max-height: 50px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="unit"  onclick="f();">
<h2>title 1</h2>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
</div>

<div class="unit"  onclick="f();">
<h2>title 2</h2>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
</div>

2
  • Потому что основной обработчик ставится внутри другого обработчика клика (который в атрибуте задан). То есть сначала по клику назначается обработчик клика, который показывает/скрывает текст, а при последующих кликах он уже выполняется 28 июн 2017 в 17:52
  • Я слабоват, суть понял, а дальше безисходность
    – Vadim
    28 июн 2017 в 18:50

2 ответа 2

1

Вы стандартным методом javascript прикрепили обработчик f() события click на элементы, потом в нем еще раз прикрепляете обработчик того же события click методами jquery.

Вот правильный вариант прикрепления обработчика события с помощью jquery:

$(document).ready(function(){
  $('.unit').click(function(){
	if ($(this).css('max-height')=='50px') {
		$(this).css('max-height','10000px');

			$(this).css('transition','max-height 1.0s ease-in-out');
			$('html, body').stop().animate({ scrollTop: $(this).offset().top - 150 }, 1000);
		} else {
			$(this).css('max-height','50px');

			$(this).css('transition','max-height 0.2s ease-in-out');
			$('html, body').stop().animate({ scrollTop: $(this).offset().top - 150 }, 100);

		}
	});
});
.unit {
overflow: hidden;
max-height: 50px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="unit">
<h2>title 1</h2>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
</div>

<div class="unit">
<h2>title 2</h2>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
</div>

1

Попробуйте так:

function f() {
    if ($(this).css('max-height')=='50px') {
        $(this).css('max-height','10000px');
        $(this).css('transition','max-height 1.0s ease-in-out');
        $('html, body').stop().animate({ scrollTop: $(this).offset().top - 150 }, 1000);
    } else {
        $(this).css('max-height','50px');
        $(this).css('transition','max-height 0.2s ease-in-out');
        $('html, body').stop().animate({ scrollTop: $(this).offset().top - 150 }, 100);
    };
}

Ошибка была в том, что при вы прикрутили обработчик onclick 2 раза.

Также в плане анимации настоятельно рекомендую переходить на добавление/удаление классов на чистом JS, а не использовать задание свойств вручную в коде. Намного повысится плавность анимации и будет меньше кода.

3
  • Дмитрий, спасибо, но не помогло. Консоль выдает: TypeError: a is not an Object. (evaluating 'b in a'). А для плавности анимации использовал плагин ricostacruz.com/jquery.transit , но здесь методом тыка не удалось на animate его наложить. Если кто пользуется и подскажет как, будет радостным событием
    – Vadim
    28 июн 2017 в 18:48
  • @Vadim здесь проблема где-то в другом участке кода "a is not an Object" судя по тексту ошибки речь идет о переменной a, которую вы пытаетесь использовать как объект (которым она не является). смотрите в коде эту переменную. 28 июн 2017 в 19:19
  • 1
    @Vadim по поводу плавности анимации здесь все просто. используйте добавление и удаление классов со свойствами анимации для получения нужного результата. скорость и кривые анимации можно задать через свойство transition. плагины jquery в принципе используют то же самое, только оборачивают это в несколько слоев, которые повышают нагрузку на вычисления и уменьшают плавность анимации. 28 июн 2017 в 19:21

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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