多次铁塌不工作，只是先扩大

我正在尝试创建多个含有内容的铁塌陷元素。 当用户点击按钮时，我希望铁塌缩。 问题是我无法单独扩展每个元素。 该脚本仅捕获第一个元素，不会影响其他元素。 我尝试了很多代码示例但没有成功。 有人能帮我吗？ 我的代码如下：

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

         
Primary text
 
Secondary text
   Second item Third item   

我只想在按下相应的按钮后展开一次折叠。 有没有办法改变这个代码来实现我需要的，没有完全重写，因为只有这个代码铁崩溃正常工作并更改其属性expanded =“是/否”，我后来使用cookie？

Answer 1

问题出在这里：

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

你为什么要在整个文件上寻找“mybutton”？ 您不需要这样做，因为Polymer封装了每个组件，因此您可以在多个情况下使用它。
正如文件所说：

Polymer自动在其本地DOM中构建静态创建的实例节点的映射，以便方便地访问常用节点，而无需手动查询它们。 在元素模板中使用id指定的任何节点都存储在此。$ 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 !!!"); } }