Question

我正在使用具有不同ID的多个<iron-collapse>，并且每个<paper-icon-button>都有一个<iron collapse>。

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

我甚至试图更改特定<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

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。

使用javascript切换铁崩溃

1 个答案: