javascript - 使用 javascript 切换铁折叠

Question

我正在使用多个<iron-collapse>具有不同 ID，我有一个 <paper-icon-button>与每个<iron collapse>相关联.

我可以使用<iron-collapse>当屏幕宽于650px时，s及其关联的按钮，但是在宽度较窄的情况下，为什么单击 <paper-icon-button>不切换<iron-collapse> ？

我什至尝试更改特定 <iron-collapse> 的类，但没有运气。切换显示属性没有帮助。

这是 template :

<paper-icon-button 
  class="pull-left" 
  id$="generalSectionToggle##[[yearEntries]]-[[monthEntries]]"
  icon="expand-less"
  on-click="toggleGeneralSection">
</paper-icon-button>
<iron-collapse id$="generalSection-[[yearEntries]]-[[monthEntries]]" opened="true">
   <div class="container-vertical">
     Some Content 
   </div>
</iron-collapse>

这是 on-click处理程序(toggleGeneralSection):

var elementID = event.target.parentElement.id.split("##")[1]
var element = "generalSection-" + elementID
var domElement = document.getElementById(element);
if (window.innerWidth > 650) {
    domElement.toggle();  
} else {
    if (domElement.opened) {
        domElement.classList.toggle('iron-collapse-closed');
    } else {
        domElement.classList.toggle('iron-collapse-opened');
    }
}

if (domElement.opened) {
    event.target.icon = "expand-less";
} else {
    event.target.icon = "expand-more";
}

Answer 1

iron-collapse当窗口小于 650px 时不会切换因为你没有打电话<iron-collapse>.toggle()在那种情况下。相反，您正在切换内部类。似乎目的是始终进行切换，无论屏幕宽度如何，因此您应该始终调用 <iron-collapse>.toggle() .

此外，您应该避免使用 document.getElementById()在您的点击处理程序中获取 <iron-collapse>因为它在 Shadow DOM 中不起作用。相反，您可以使用 this.$$(selector) 。在您的例子中，您正在查询元素 ID，因此您应该添加前缀 element与 # (即 "#generalSection-" + elementID )。

您的代码应该看起来更像这样:

var elementID = event.target.parentElement.id.split("##")[1]
var element = "#generalSection-" + elementID
var domElement = this.$$(element);
domElement.toggle();  

if (domElement.opened) {
    event.target.icon = "expand-less";
} else {
    event.target.icon = "expand-more";
}

查看此codepen切换 <iron-collapse> 的演示与 <paper-icon-button>并使用 computed binding对于图标。看看这个codepen使标题成为可点击切换的变体。