javascript - Polymer 检查元素是否打开并将 css 类分配给父级

Question

我有一个名为 <collapse-item> 的 polymer 元素，当它打开时，会获得一个属性 opened 。 ( collapse-item 基于 iron-collapse )但是我如何用 JS 检查此元素是否打开，然后将另一个 css 类分配给它的父元素？

<template is="dom-repeat" items="{{booksList}}">
  <div class="parent">
    <h1>Some header</h1>
    <p>Some text</p>
    <collapse-item input-text={{item.blurb}}></collapse-item>
  </div>
</template>

我只想为 <div class="parent"> 的这个实例分配一个新的 css 类而不是页面上的所有其他人。

编辑选项 1

我更改了上面的内容以添加对打开的项目的检查并添加了一些js:

<template is="dom-repeat" items="{{booksList}}">
  <div class="parent" id="[[_toggleId]]">
    <h1>Some header</h1>
    <p>Some text</p>
    <collapse-item input-text={{item.blurb}} opened="{{opened}}"></collapse-item>
  </div>
</template>

JS:

  properties: {

  _toggleId: {
      type: String,
      computed: '_computeToggleId(opened)'
    }

  },
  _computeToggleId: function(opened) {
      return opened ? 'expandeditem' : '';
  }

这不仅为父类的一次实例创建了 id，还为 dom-repeat 中的所有实例创建了 id。 .

编辑选项 2

<template is="dom-repeat" items="{{booksList}}">
  <div class="parent" id="parentElem">
    <h1>Some header</h1>
    <p>Some text</p>
    <collapse-item input-text={{item.blurb}} opened="{{opened}}" on-tap="_computeToggleId(opened)"></collapse-item>
  </div>
</template>

JS:

  _computeToggleId: function(opened) {
    if (opened) {
      this.$.parentElem.classList.add('expandeditem');
    }

无法读取 classList的undefined .

谢谢你帮助我学习。我是 Polymer 新手。

Answer 1

您可以将属性绑定(bind)到打开的属性。这是铁崩塌的例子

<iron-collapse opened={{isOpen}}>
  <div class="parent" id="parentElem">
   <div>Content goes here...</div>
  </div>
</iron-collapse>

然后您可以根据父元素的 CSS 类的更改来检查条件 if(isOpen) 是 true 还是 false。 为父元素分配 id 并添加或删除带有 id 的类名

      this.$.parentElem.classList.remove('YOUR_CSS_CLASS_NAME');
      this.$.parentElem.classList.add('YOUR_CSS_CLASS_NAME');