Как заставить мои переходы для максимальной высоты работать синхронно?

Question

У меня 4 dropdown контейнера. Когда я нажимаю на заголовок, я хочу, чтобы связанный с ним абзац появлялся, а другой появившийся абзац исчезал.

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

HTML :

<div class="dropDown">
  <div class="header">
    <a href="javascript:void(0)">header1</a>
  </div>
  <p class="active">some things here some things here some things here some things here</p>
</div>

<div class="dropDown">
  <div class="header">
    <a href="javascript:void(0)">header2</a>
  </div>
  <p>some things here some things here some things here some things here</p>
</div>

<div class="dropDown">
  <div class="header">
    <a href="javascript:void(0)">header3</a>
  </div>
  <p>some things here some things here some things here some things here</p>
</div>

<div class="dropDown">
  <div class="header">
    <a href="javascript:void(0)">header4</a>
  </div>
  <p>some things here some things here some things here some things here</p>
</div>

CSS:

.dropDown p{
  background: rgb(245, 245, 245);
  border-right: 40px solid #e8e8e8;
  font-size: 13px;
  line-height: 35px;
  max-height: 0px;
  overflow: hidden;
  margin-bottom: 0;
  padding: 0px 15px 0px 30px;
  transition: max-height .3s ease;
}

.dropDown p.active{
  max-height: 500px;
  padding-top:8px;
  padding-bottom: 20px;
}

jQuery:

Headers.click(function(){
  var theP = $(this).parent().children("p"); //current paragraph
  dropDownParagrsphs.not(theP).removeClass("active");
  theP.toggleClass("active");
});

Как сделать так, чтобы переходы работали вместе, как при высоте одного абзаца уменьшается, высота другого абзаца увеличивается?

Answer 1

интересно, вы наткнулись на обманчиво сложную проблему в чистом CSS. Правда в том, что ваши абзацы уже ведут себя так, как вы этого хотите, проблема в том, что вы указали большую максимальную высоту относительно фактического содержимого p, создается впечатление, что они выполняются один за другим, но это только потому, что время, которое требуется, относительно (по сравнению с фактической высотой p с переполнением: скрытым) длинным, чтобы увеличить / уменьшить максимальную высоту до 500 пикселей. Это как если бы у вас была невидимая коробка, растущая до 500 пикселей. Это должно быть легко решаемым, если изменить максимальную высоту на auto, но, к сожалению, вы не можете анимировать auto автоматически при чистых переходах CSS. Вы можете выбрать следующие варианты:

a) выбрать другую жестко заданную максимальную высоту, которая ближе к фактическому размеру контента.
b) использовать масштаб преобразования (Y)
c) использовать чистый JS: например, slideUp и slideDown

var Headers = $('.header') 
var dropDownParagraphs = $('.dropDown p') 

Headers.click(function(){
  var theP = $(this).parent().children("p"); //current paragraph
    // theP.addClass("active");
  // dropDownParagraphs.not(theP).removeClass("active");
  dropDownParagraphs.not(theP).slideUp(200);
  theP.slideDown(200);

});

проверьте эту кодовую ручку для реализации c) https://codepen.io/bakuthe3rd/pen/abvzVJz

Answer 2

Для этого можно использовать метод .slideToogle(duration, easing, callback). Кроме того, я изменил свойства padding-bottom и padding-top на p с p.active, чтобы они не сильно изменились во время перехода.

jQuery :

$('p').slideUp(0); // close all
$('.active').slideToggle(300); // open the default

$('.header').click(function() {
  var nowP = $(this).parent().children("p"); // current paragraph
  var prevP = $('.active'); // opened paragraph
  var isSame = $('p').index(prevP) == $('p').index(nowP);

  prevP.removeClass("active").slideToggle({ duration: 300, queue: false });
  if (!isSame) nowP.addClass("active").slideToggle({ duration: 300, queue: false });
});

$('p').slideUp(0);
$('.active').slideToggle(300);

$('.header').click(function() {
  var nowP = $(this).parent().children("p"); // current paragraph
  var prevP = $('.active'); // opened paragraph
  var isSame = $('p').index(prevP) == $('p').index(nowP);

  prevP.removeClass("active").slideToggle({ duration: 300, queue: false });
  if (!isSame) nowP.addClass("active").slideToggle({ duration: 300, queue: false });
});

.dropDown p {
  background: rgb(245, 245, 245);
  border-right: 40px solid #e8e8e8;
  font-size: 13px;
  line-height: 35px;
  overflow: hidden;
  margin-bottom: 0;
  padding: 0px 15px 0px 30px;
  transition: max-height .3s ease;
  padding-top: 8px;
  padding-bottom: 20px;
}

.dropDown p.active {
  max-height: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropDown">
  <div class="header">
    <a href="javascript:void(0)">header1</a>
  </div>
  <p class="active">some things here some things here some things here some things here</p>
</div>

<div class="dropDown">
  <div class="header">
    <a href="javascript:void(0)">header2</a>
  </div>
  <p>some things here some things here some things here some things here</p>
</div>

<div class="dropDown">
  <div class="header">
    <a href="javascript:void(0)">header3</a>
  </div>
  <p>some things here some things here some things here some things here</p>
</div>

<div class="dropDown">
  <div class="header">
    <a href="javascript:void(0)">header4</a>
  </div>
  <p>some things here some things here some things here some things here</p>
</div>

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

Кроме того, вы можете добавить 'linear' в качестве второго аргумента в методе .slideToggle, если вам нужен линейный переход. По умолчанию это 'swing'.