使用javascript切换铁坍塌

Question

我使用多个<iron-collapse> s具有不同的ID，并且我有一个<paper-icon-button>与每个<iron collapse>关联。

我可以使用<iron-collapse> s的它们相关的按钮时，屏幕比650px更宽，但是在窄的宽度，为什么点击<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

当窗口小于650px，因为你不打电话<iron-collapse>.toggle()的iron-collapse不切换在这种情况下。相反，你正在切换一个内部类。看起来打算总是切换屏幕宽度，所以你应该总是打电话<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的变化，使标题一个可点击的切换。