Мне нужно открыть DIV как аккордеон, используя JQuery и Vue.js

Question

Мне нужна помощь, чтобы нижняя часть открылась как гармошка.Мой стиль не работает.

<main>
  <h1>Frequently Asked Questions</h1>
  <div class="topic">
    <div class="open">
      <h2 class="question">1. How can i delete my complaint/comment?</h2>
      <span class="faq-t"></span>
    </div>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor n reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

Это то, что я использую, чтобы открыть код выше.

$(".open").click(function() {
  var container = $(this).parents(".topic");
  var answer = container.find(".answer");
  var trigger = container.find(".faq-t");

  answer.slideToggle(200);

  if (trigger.hasClass("faq-o")) {
    trigger.removeClass("faq-o");
  } else {
    trigger.addClass("faq-o");
  }

  if (container.hasClass("expanded")) {
    container.removeClass("expanded");
  } else {
    container.addClass("expanded");
  }
});

Answer 1

Если вы собираетесь использовать Vue, вы должны взять на себя обязательство использовать его для всех манипуляций с DOM, за исключением того, что настраивается такими вещами, как slideToggle, и эти пользовательские поведения должны быть изолированы от обычных обновлений DOM, которые Vue будетdo.

Вот как ваш пример может быть сделан с Vue, используя jQuery slideUp и slideDown в зависимости от ситуации, чтобы скрыть и показать ответ.Большую часть времени функции jQuery лучше всего обрабатываются с помощью компонента оболочки , но здесь было достаточно настраиваемой директивы.

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data: {
    expanded: false
  },
  methods: {
    toggle() {
      this.expanded = !this.expanded;
    }
  },
  computed: {
    containerClass() {
      return this.expanded ? 'expanded' : '';
    },
    triggerClass() {
      return this.expanded ? 'faq-o' : '';
    }
  },
  directives: {
    slideToggle(el, binding) {
      if (binding.oldValue !== binding.value) {
        const fn = binding.value ? 'slideDown' : 'slideUp';
        $(el)[fn](200);
      }
    }
  }
});

.answer {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>


<div id="app" class="container">

  <h1>Frequently Asked Questions</h1>
  <div class="topic" :class="containerClass">
    <div @click="toggle">
      <h2 class="question">1. How can i delete my complaint/comment?</h2>
      <span class="faq-t" :class="triggerClass"></span>
    </div>
    <p class="answer" v-slide-toggle="expanded">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor n reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>