Выпадающее меню CSS при нажатии jquery

Question

У меня есть раскрывающееся меню, состоящее из элементов с содержимым.

У него есть заголовок, и когда отображается щелчок с помощью меню jquery.Это работает правильно, я просто хочу оживить это.(Вниз и вверх).

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

$(".item").click(function() {
  if ($(this).hasClass('active')) {
    $(this).removeClass('active');
  } else {
    $(this).addClass('active');
  }
})

.item {
  position: relative;
}

.item .item_group {
  display: none;
}

.item.active .item_group {
  display: block;
  position: absolute;
  width: 100%;
  background: #fff;
  z-index: 100;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item active">
  <h6>Title</h6>
  <div class="item_group">
    <div class="item_child">
      content
    </div>
    <div class="item_child">
      content
    </div>
    <div class="item_child">
      content
    </div>
  </div>
</div>

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

Answer 1

Во-первых, обратите внимание на будущее, что ваш оператор if для проверки видимости элемента, а затем добавления / удаления класса может быть заменен всего одним вызовом toggleClass()

.требование, если вы просто хотите анимировать переход элемента, когда он отображается или скрыт, вы можете использовать slideToggle():

$(".item").click(function() {
  $(this).find('.item_group').slideToggle();
})

.item {
  position: relative;
}

.item .item_group {
  display: none;
  position: absolute;
  width: 100%;
  background: #fff;
  z-index: 100;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item active">
  <h6>Title</h6>
  <div class="item_group">
    <div class="item_child">
      content
    </div>
    <div class="item_child">
      content
    </div>
    <div class="item_child">
      content
    </div>
  </div>
</div>

Этого также можно добиться только в CSS, используя transition:

$(".item").click(function() {
  $(this).toggleClass('active');
})

.item {
  position: relative;
}

.item .item_group {
  height: 0;
  position: absolute;
  width: 100%;
  background: #fff;
  z-index: 100;
  transition: height 0.5s;
  overflow: hidden;
}

.item.active .item_group {
  height: 55px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item active">
  <h6>Title</h6>
  <div class="item_group">
    <div class="item_child">
      content
    </div>
    <div class="item_child">
      content
    </div>
    <div class="item_child">
      content
    </div>
  </div>
</div>