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

Question

Иероним

html

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

Как реализовать раскрытие/скрытие дополнительного меню с помощью HTML, JS или библиотек? 

У меня есть блок, состоящий из 6 карточек. При нажатии на карточку, должно открываться вниз дополнительное меню со 6 карточками. При повторном нажатии меню должно скрываться. 

Есть ли способы достичь этого с использованием HTML и JS или с помощью соответствующих библиотек?

25 сентября 2023 г. 3:57

Ответы на вопрос 2

Похожие вопросы

Answer 1

Да, можно достичь желаемого результата с использованием HTML и JS или с помощью соответствующих библиотек.

Вариант 1: Использование простого HTML и JS.

HTML:
```html
<div class="block">
  <div class="card" onclick="toggleMenu(this)">
    Карточка 1
  </div>
  <div class="card-menu">
    <div class="card">
      Дополнительная карточка 1
    </div>
    <div class="card">
      Дополнительная карточка 2
    </div>
    <div class="card">
      Дополнительная карточка 3
    </div>
    <div class="card">
      Дополнительная карточка 4
    </div>
    <div class="card">
      Дополнительная карточка 5
    </div>
    <div class="card">
      Дополнительная карточка 6
    </div>
  </div>
</div>
```

CSS:
```css
.block {
  width: 300px;
}

.card {
  background-color: lightblue;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

.card-menu {
  display: none;
}
```

JS:
```javascript
function toggleMenu(card) {
  var cardMenu = card.nextElementSibling;
  cardMenu.style.display = (cardMenu.style.display === 'none' || cardMenu.style.display === '') ? 'block' : 'none';
}
```

Вариант 2: Использование библиотеки jQuery для более удобной работы с DOM.

HTML:
```html
<div class="block">
  <div class="card">
    Карточка 1
  </div>
  <div class="card-menu">
    <div class="card">
      Дополнительная карточка 1
    </div>
    <div class="card">
      Дополнительная карточка 2
    </div>
    <div class="card">
      Дополнительная карточка 3
    </div>
    <div class="card">
      Дополнительная карточка 4
    </div>
    <div class="card">
      Дополнительная карточка 5
    </div>
    <div class="card">
      Дополнительная карточка 6
    </div>
  </div>
</div>
```

CSS:
```css
.block {
  width: 300px;
}

.card {
  background-color: lightblue;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

.card-menu {
  display: none;
}
```

JS (с использованием jQuery):
```javascript
$(document).ready(function() {
  $('.card').click(function() {
    var cardMenu = $(this).next('.card-menu');
    cardMenu.slideToggle();
  });
});
```

В обоих вариантах при нажатии на карточку будет выполняться функция toggleMenu или slideToggle, которая будет открывать или скрывать соответствующее дополнительное меню.

Answer 2

Здесь нет необходимости использовать библиотеки, так как все можно сделать на чистом JavaScript.