Ошибка в изменение высоты блока. Не хочет принимать 100%

433
28 июля 2017, 01:36

Проблема в том, что раскрывается резко, а вот в обратную сторону работает как надо.

$('.test').click(function() { 
  var test = $(this).prev(); 
  if (test.innerHeight() == 106) { 
    test.animate({ 
      height: "100%", 
    }, 1000); 
  } else { 
    test.animate({ 
      height: 106, 
    }, 1000); 
  } 
});
p { 
  background-color: #E3DEDE; 
  height: 106px; 
  overflow: hidden; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
<p>The best products begin with the best ingredients. Flour is milled only from select grades of the best wheat grains; the best nature has to offer, it looks like white powder. We have many varieties and formats for diverse applications.High quality grade. 
  This sort of flour is pretty clear from which is preparing only from well-peeled grains. This grade of flour characterize by a low content of gluten and large amount of starch. This grade of flour has white color with a light milky shade. This grade 
  often use in cooking, because batch turns out splendid and porous.The first grade of flout. This is the most popular grade, which allows for a small number of grain shells. This grade of flour is characterize large amount of gluten, which makes it possible 
  to get a very elastic dough. This grade of flour has a light yellow color. Batches turns out volumetric and fragrant.The second grade of flour. This grate is characterized by a darker grayish color, which has a large number of grain envelopes this is 
  allowing in the composition. Batches turns out lush and porous. This grade of flour don’t use for turn out for saltwater fish splashDifferent grade of flour differ from each other parameters: the amount of flour, which turn our from 100 kg of grain, 
  product color, ash content, particle size, as well as the presence of bran and the amount of gluten.</p> 
<button class="test">test</button>

Как обойти? Нужно по клику раскрыть блок на максимальную высоту. Думаю проблема вот здесь.

height: "100%"

пробовал ставить сюда auto, не работает. Хочет только целое значение.

Пример на jsfiddle

Answer 1

Можно с помощью scrollHeight вычислять реальную высоту блока. Затем подставлять это значение в параметр height

$('.test').click(function() { 
  var test = $(this).prev(); 
  if (test.innerHeight() == 106) { 
    test.animate({ 
      height: test.prop('scrollHeight') + "px", // Реальная высота 
    }, 1000); 
  } else { 
    test.animate({ 
      height: 106, 
    }, 1000); 
  } 
});
p { 
  background-color: #E3DEDE; 
  height: 106px; 
  overflow: hidden; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
<p>The best products begin with the best ingredients. Flour is milled only from select grades of the best wheat grains; the best nature has to offer, it looks like white powder. We have many varieties and formats for diverse applications.High quality grade. 
  This sort of flour is pretty clear from which is preparing only from well-peeled grains. This grade of flour characterize by a low content of gluten and large amount of starch. This grade of flour has white color with a light milky shade. This grade 
  often use in cooking, because batch turns out splendid and porous.The first grade of flout. This is the most popular grade, which allows for a small number of grain shells. This grade of flour is characterize large amount of gluten, which makes it possible 
  to get a very elastic dough. This grade of flour has a light yellow color. Batches turns out volumetric and fragrant.The second grade of flour. This grate is characterized by a darker grayish color, which has a large number of grain envelopes this is 
  allowing in the composition. Batches turns out lush and porous. This grade of flour don’t use for turn out for saltwater fish splashDifferent grade of flour differ from each other parameters: the amount of flour, which turn our from 100 kg of grain, 
  product color, ash content, particle size, as well as the presence of bran and the amount of gluten.</p> 
<button class="test">test</button>

По поводу возможности раскрывать "поверх" других блоков, то это уже, как мне кажется, надо решать вёрсткой. Например, ознакомьтесь со свойством position

READ ALSO
Убрать зуминг страницы после выбора в нативном дропдауне

Убрать зуминг страницы после выбора в нативном дропдауне

На мобильной версии сайта, после выбора значения в нативном дропдауне страница увеличивается (зумиться)Как это можно исправить помимо добавления...

362
Добавление даты каждого дня года

Добавление даты каждого дня года

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

278
Когда нужен lazy loading связаных сущностей в Hibertate?

Когда нужен lazy loading связаных сущностей в Hibertate?

Есть несколько связанных сущностейУ сущности Propose в виде поля есть User

308