1

Нужно реализовать меню-аккордеон. При клике на блок с заголовком первого уровня должен плавно "выезжать" сверху вниз блок с контентом. При этом, контент, который будет ниже, нужно чтобы тоже сдвигался вниз (думаю, это логично). При мне знакомый пытался реализовать подобное с помощью max-height: 350px; overflow: hidden; transition: 1s all;, и у него это получилось..Но, похоже, он использовал что-то еще. Ибо для меня этот код не работает. Помогите разобраться, что я упускаю?

new Vue({
  el: '#app',
  data: {
    isHide: true,
  },
  methods: {
    open: function() {
      this.isHide = !this.isHide
    }
  }
});
Vue.config.productionTip = false;
Vue.config.devtools = false;
.pos {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.all {
  background: green;
  width: 400px;
  height: 40px;
}

h1,
h2 {
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: middle;
}

.hideContent {
  background: red;
  width: 300px;
  height: 100px;
  max-height: 350px;
  overflow: hidden;
  transition: 1s all;
}
<html>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  <div class="pos" id="app">
    <div class="all" @click="open()">
      <h1>some title</h1>
    </div>
    <div class="hideContent" v-if="isHide==false">
      <h2>some content</h2>
    </div>
    <h3>some</h3>
    <h3>some</h3>
    <h3>some</h3>
    <h3>some</h3>
    <h3>some</h3>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
</body>

</html>

update : Пробовала биндить класс (transition завязываю на height, добавляю класс с изменением height) при изменении значения isHide. Для меня это не работает...Что делаю не так, что упускаю?

new Vue({
  el: '#app',
  data: {
    isHide: true,
  },
  methods: {
    open: function() {
      this.isHide = !this.isHide
    }
  }
});
.pos {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.all {
  background: green;
  width: 400px;
  height: 40px;
}

h1,
h2 {
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: middle;
}

.hideContent {
  background: red;
  width: 300px;
}

.accordion {
  overflow: hidden;
  height: 0px;
  transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}

.accordiooon {
  transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  box-shadow: 0px 0px 0px 1px rgba(155, 155, 155, 0.3);
  height: 100px;
}
<html>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  <div class="pos" id="app">
    <div class="all" @click="open()">
      <h1>some title</h1>
    </div>
    <div class="hideContent" :class="{'accordiooon': isHide==false, 'accordion': isHide==true}" v-if="isHide==false">
      <h2>some content</h2>
    </div>
    <h3>some</h3>
    <h3>some</h3>
    <h3>some</h3>
    <h3>some</h3>
    <h3>some</h3>


  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
</body>

</html>

update : друзья! хочу еще уточнить, что у меня в качестве контента идет КОМПОНЕНТ с уже заданной ему высотой внутри компонента соответственно. Поэтому, я полагаю, второй вариант для меня и НЕ работает. Какие имеются варианты реализации? Как мне сделать грамотный аккордеон?

1 ответ 1

1

Оберните блок с условием в еще один блок и на него уже вешайте классы.

new Vue({
  el: '#app',
  data: {
    isHide: true,
  },
  methods: {
    open: function() {
      this.isHide = !this.isHide
    }
  }
});
.pos {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.all {
  background: green;
  width: 400px;
  height: 40px;
}

h1,
h2 {
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: middle;
}

.hideContent {
  background: red;
  width: 300px;
}

.accordion {
  overflow: hidden;
  height: 0px;
  transition: all 1s;
}

.accordiooon {
  transition: all 1s;
  height: 100px;
}
<div class="pos" id="app">
  <div class="all" @click="open">
    <h1>some title</h1>
  </div>
  <div class="hideContent accordion" :class="{'accordiooon': isHide == false}">
    <div v-if="isHide==false">
      <h2>some content</h2>
    </div>
  </div>
  <h3>some</h3>
  <h3>some</h3>
  <h3>some</h3>
  <h3>some</h3>
  <h3>some</h3>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

1
  • спасибо большое!!! Commented 14 авг. 2019 в 5:27

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.