Question

这里我提出了我的问题的简化版本。在我的情况下，jQuery（3.2.1）slideToggle（）函数根本不会向上或向下滑动。但是，控制台会在点击事件中打印slideToggle（）函数上方的行，表示触发了点击事件。该函数位于Polymer元素类中。

的console.log（ '触发'）;

会打印到控制台。

代码：

<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

你正在使用聚合物2。默认情况下，它使用shadowDOM。不幸的是，jQuery无法访问shadowDOM中的元素。您可以为要滑动的特定元素添加id，然后使用聚合物选择它。

＆＃13;

<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>

＆＃13;

到达聚合物slideToggle（）函数，但没有结果

1 个答案: