Polymer SlideToggle() Funktion ist erreicht, aber kein Ergebnis

Question

Hier präsentiere ich eine vereinfachte Version meines Problems. Die jQuery (3.2.1) slideToggle() Funktion gleitet in meinem Fall überhaupt nicht nach oben oder unten. Die Konsole druckt jedoch die Zeile über der Funktion "slideToggle()" im Ereignis "on-click", wodurch angezeigt wird, dass das On-Click-Ereignis ausgelöst wurde. Die Funktion befindet sich in einer Polymer-Elementklasse.

Die

console.log ('ausgelöst');

wird auf die Konsole gedruckt.

Code:

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

Vielen Dank für Ihre Hilfe!

Answer 1

Sie verwenden Polymer2. Standardmäßig verwendet dies shadowDOM. Leider kann jQuery nicht auf ein Element in der shadowDOM zugreifen. Sie können dem jeweiligen Element, das Sie verschieben möchten, eine ID hinzufügen und sie dann mithilfe von Polymer auswählen.

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