聚合物检查元素是否已打开并将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');
    }

无法读取undefined的classList 。

感谢您帮助我学习。 我是Polymer的新手。

Answer 1

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

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

那么您可以根据父元素的更改CSS类检查条件（isOpen）是true还是false。 将ID分配给父元素，并使用ID添加或删除类名

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