javascript - 多次铁塌陷不起作用，仅先展开

Question

我正在尝试创建多个内部包含内容的 iron-collapse 元素。当用户单击按钮时，我希望 iron-collapse 展开。问题是我无法单独扩展每个元素。该脚本只捕获第一个元素，不会影响其他元素。我尝试了许多代码示例但没有成功。有人能帮我吗？我的代码如下:

var expandContent = document.getElementById('mybutton');
    expandContent.onclick = function(event) {
      var moreInfo = document.getElementById('moreinfo');
      var iconButton = Polymer.dom(event).localTarget;
      iconButton.icon = moreInfo.opened ? 'hardware:keyboard-arrow-down'
                                        : 'hardware:keyboard-arrow-up';
      
      /*moreInfo.toggle();*/ /* This one works to, don't know which is better */
      
      event.currentTarget.parentElement.querySelector('iron-collapse').toggle();
    };

<paper-card style="width:100%;line-height:56px;font-size:16px;font-weight:400;">
  <paper-icon-button class="mybutton" id="mybutton" icon="hardware:keyboard-arrow-up" style="float:right;margin:8px;" >
  </paper-icon-button>
    <iron-icon icon="communication:forum"></iron-icon>
    <iron-collapse id="moreinfo" class="moreinfo" style="width:100%;">
      <paper-item>
        <iron-icon icon="info"></iron-icon>
        <paper-item-body two-line>
          <div>Primary text</div>
          <div secondary>Secondary text</div>
        </paper-item-body>
      </paper-item>
      <paper-item>Second item</paper-item>
      <paper-item>Third item</paper-item>
    </iron-collapse>
</paper-card>

我只想在按下相应按钮后展开一个折叠。有没有办法更改此代码以实现我需要的功能，而无需完全重写，因为只有使用此代码 iron-collapse 才能正常工作并更改其属性 expanded="yes/no"，我稍后将其与 cookie 一起使用？

Answer 1

问题出在这里:

var expandContent = document.getElementById('mybutton');

为什么要在整个文档中查找“mybutton”？您不需要这样做，因为 Polymer 封装了每个组件，因此您可以在多种情况下使用它。
作为documentation说:

Polymer automatically builds a map of statically created instance nodes in its local DOM, to provide convenient access to frequently used nodes without the need to query for them manually. Any node specified in the element’s template with an id is stored on the this.$ hash by id.

因此，您需要将 document.getElementById('mybutton') 更改为 this.$.mybutton 以引用本地 dom 按钮。以这种方式，应该工作。

编辑

使用您的代码，而不是像在 Polymer 中那样做，也许这会对您有所帮助:

var idArray =["mybutton","mybutton2","mybutton3"];
idArray.forEach(function(item,index,array){
    var expandContent = document.getElementById(item);
    expandContent.onclick = function(event) {
    var moreInfo = document.getElementById('moreinfo');
    var iconButton = Polymer.dom(event).localTarget;
    iconButton.icon = moreInfo.opened ? 'hardware:keyboard-arrow-down'
                                    : 'hardware:keyboard-arrow-up';
  
    /*moreInfo.toggle();*/ /* This one works to, don't know which is better */
  
    event.currentTarget.parentElement.querySelector('iron-collapse').toggle();
};

}.bind(this));