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会做。

以下是使用Vue完成示例的方法，可以适当地使用jQuery的slideUp和slideDown隐藏和显示答案。在大多数情况下，最好使用wrapper component处理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>

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

1 个答案: