使用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的變化，使標題一個可點擊的切換。