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

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

Answer 2

更新好的，我在阅读了一些论坛和 js 文档后找到了合适的解决方案，我会把它写下来，也许有人也需要它。

 var elems = document.getElementsByClassName('mybutton'); // Getting all button with same class name
for(var i = 0; i < elems.length; i++) { // Adding count indexes to buttons starting from first is 0       
    elems[i].onclick = function(event){ //And here is function to do expand/collapse, it can be any other function too, main idea was to get work/trigger all items with same class
        var expandContent = event.currentTarget.parentElement.querySelector('iron-collapse');
        var iButton = Polymer.dom(event).localTarget;
        iButton.icon = expandContent.opened ? 'hardware:keyboard-arrow-down' : 'hardware:keyboard-arrow-up';
        event.currentTarget.parentElement.querySelector('iron-collapse').toggle();
        console.log("Works ! Great !!!");
    }
}

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

multiple iron-collapse not working, expands only first

javascript

jquery

expander

collapse

polymer

编辑