聚合物多重铁塌陷答案

【问题标题】：Polymer Multiple Iron-Collapse聚合物多重铁塌陷
【发布时间】：2017-08-01 00:25:28
【问题描述】：

聚合物文档不清楚如何使用 Iron-collapse 创建多个切换。有没有一种简单的方法可以让每个项目切换？我看了一下multiple iron-collapse not working, expands only first，但我无法让它工作。也许从那以后聚合物发生了一些变化。下面是我正在使用的代码示例。

<div on-click="toggle"><paper-item><a class="paper-item-link"><strong>List Items</strong></a></paper-item></div>
<iron-collapse id="collapse">
<div>Content</div>
</iron-collapse>

<div on-click="toggle"><paper-item><a class="paper-item-link"><strong>List Items</strong></a></paper-item></div>
<iron-collapse id="collapse">
<div>Content</div>
</iron-collapse>

  toggle: function() {
    this.$.collapse.toggle();
  },

【问题讨论】：

标签： javascript polymer polymer-1.0

【解决方案1】：

Polymer 的 automatic node finding 通过 ID 映射节点，但是您有两个具有相同 ID 的节点，因此只有遇到的最后一个节点会映射到该 ID（即，this.$.collapse 指的是您的第二个 iron-collapse例子）。此外，由于您的 click-handler 指的是同一个 iron-collapse，因此两个 paper-items 在单击时都会切换同一个 iron-collapse。

最快的解决方案是为每个 iron-collapse 使用唯一的节点 ID，并使用唯一的 click 处理程序：

<head>
  <base href="https://polygit.org/polymer+v1.9.2/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="paper-item/paper-item.html">
  <link rel="import" href="iron-collapse/iron-collapse.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <div on-click="toggle1">
        <paper-item>
          <a class="paper-item-link"><strong>List Items</strong></a>
        </paper-item>
      </div>
      <iron-collapse id="collapse1">
        <div>Content</div>
      </iron-collapse>

      <div on-click="toggle2">
        <paper-item>
          <a class="paper-item-link"><strong>List Items</strong></a>
        </paper-item>
      </div>
      <iron-collapse id="collapse2">
        <div>Content</div>
      </iron-collapse>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo',
          toggle1: function() {
            this.$.collapse1.toggle();
          },
          toggle2: function() {
            this.$.collapse2.toggle();
          }
        });
      });
    </script>
  </dom-module>
</body>

codepen

【讨论】：