时间戳

首页 > 解决方案 > 我需要使用 JQuery 和 Vue.js 打开像手风琴一样的 DIV

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

问题描述

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

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

标签： jquerysass

解决方案

如果你打算使用 Vue，你应该承诺将它用于所有的 DOM 操作，除了像slideToggle.

以下是您的示例如何使用 Vue 完成，使用 jQueryslideUp并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>

推荐阅读