CSS + JS: Аккордеонные вкладки перемещают другие вкладки за пределы экрана - PullRequest
Новая
       4

CSS + JS: Аккордеонные вкладки перемещают другие вкладки за пределы экрана

0 голосов
/ 10 ноября 2018

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

Если секция аккордеона длиннее экрана, область прокручивается, но вкладки остаются в нижней части экрана.

Проблема: в настоящее время мой аккордеон толкает все элементы вниз по странице. Я полагаю, что эта проблема вызвана, потому что я не могу понять position + overflow правильно. Любая помощь будет оценена.

Expected accordion look.

Аккордеонный CSS: 

.accordion {
  align-items: flex-start;
  align-content: flex-start;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  box-sizing: border-box;
  display: flex;
  flex-flow: row wrap;
  height: calc(100vh - 68px);
  position: relative;
  right: 0;
  top: 0;

  &__panel {
    border-bottom: 1px solid black;
    flex: 1 100%;
    flex-direction: column;
    position: relative;
    overflow: hidden;

    &__header {
      font-size: 1.25em;
      line-height: 2em;
      padding: 5px;
      text-align: left;

      span {
        float: right;
        padding: 0 1em 0 0;

        img {
          width: 17px;
        }
      }
    }

    &__body {
    }
  }

  .active {
    background: black;
    color: lightgray;
  }

  .hide {
    display: none;
  }
}

HTML-макет: 

<div class="accordion">
  <div class="accordion__panel">
    <div class="accordion__panel__header">SOME HEADER<span><img src="static/svg/caret.svg"></span></div>
    <div class="accordion__panel__body hide">
      SOME CONTENT GOES HERE.
    </div>
  </div>
</div>

Я не верю, что мой JS уместен в этом случае, но могу также опубликовать это, если это необходимо.

JS удаляет класс hide из тела. Это время, пока анимация не будет реализована.

...