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

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

У него есть заголовок, и при нажатии с помощью 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>

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

jquery html css menu dropdown

17.12.2018 11:25

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Нет проблем рад помочь

— 17.12.2018 11:42

17.12.2018 11:31