我需要使用 JQuery 和 Vue.js 打开像手风琴一样的 DIV答案

【问题标题】：I need to open up a DIV like an accordion using JQuery and Vue.js我需要使用 JQuery 和 Vue.js 打开像手风琴一样的 DIV
【发布时间】：2019-03-18 04:31:03
【问题描述】：

我需要帮助才能像手风琴一样打开下面的内容。我的风格不行。

<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");
  }
});

【问题讨论】：

具体似乎出了什么问题？您可能会发现这些信息：How To (Safely) Use A jQuery Plugin With Vue.js
另见Make VueJS and jQuery play nice或Vue.js and jQuery?
看起来你根本没有使用 Vue。特别是，您使用 jQuery 来处理 click 事件，以及其中的大量 DOM 操作。查看其他 cmets 中的一些链接。
@RoyJ 上面的代码工作正常你可以看到我的回答，我认为他在其他地方有问题
@boussadjrabrahim 单独在 jQuery 下工作的代码在引入 Vue 时通常无法工作。问题询问是否将两者结合使用。上面的代码没有同时使用它们。您的示例也没有使用 Vue 来控制 DOM。

标签： jquery sass

【解决方案1】：

如果你打算使用 Vue，你应该承诺将它用于所有 DOM 操作，除了像 slideToggle 这样的自定义处理的东西，并且这些自定义行为需要与 Vue 将执行的正常 DOM 更新隔离开来做。

以下是使用 Vue 完成示例的方法，使用 jQuery 的 slideUp 和 slideDown 适当地隐藏和显示答案。大多数时候，jQuery 函数最好使用wrapper component 来处理，但在这里，自定义指令就足够了。

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>

【讨论】：