polymer slideToggle() 函数到达，但没有结果

Question

在这里，我展示了我的问题的简化版本。 jQuery(3.2.1) slideToggle() 函数在我的例子中根本不会向上或向下滑动。但是，控制台确实在点击事件中的 slideToggle() 函数上方打印了一行，表示触发了点击事件。该函数位于 Polymer 元素内 class.

console.log('triggered');

确实打印到控制台。

代码：

<link rel="import" href="../../bower_components/polymer/polymer-element.html">

<dom-module id="cm-body">
 <template>

  <div id="container">
    <div on-click="performSlideToggle" >test</div>
    <p>blabla test</p>
  </div>
 </template>
 <script>

 /**
  * @customElement
  * @polymer
  */
 class CmBody extends Polymer.Element {
   static get is() { return 'cm-body'; }

   performSlideToggle() {
     console.log('triggered');
     $('p').slideToggle();
   }
 }

 window.customElements.define(CmBody.is, CmBody);
 </script>
</dom-module>

感谢您的帮助！

Answer 1

您正在使用 polymer2。默认情况下，这使用 shadowDOM。不幸的是 jQuery 无法访问 shadowDOM 中的元素。您可以向要滑动的特定元素添加一个 id，然后使用聚合物 select 它。

<link rel="import" href="../../bower_components/polymer/polymer-element.html">

<dom-module id="cm-body">
 <template>

  <div id="container">
    <div on-click="performSlideToggle" >test</div>
    <p id="slide_able">blabla test</p>
  </div>
 </template>
 <script>

 /**
  * @customElement
  * @polymer
  */
 class CmBody extends Polymer.Element {
   static get is() { return 'cm-body'; }

   performSlideToggle() {
     console.log('triggered');
     $(this.$.slide_able).slideToggle();
   }
 }

 window.customElements.define(CmBody.is, CmBody);
 </script>
</dom-module>

polymer slideToggle() 函数到达，但没有结果

polymer slideToggle() function is reached, but no result

javascript

jquery

onclick

slidetoggle

polymer