javascriptを使用して鉄崩壊をトグルする

Question

<iron-collapse>複数の異なるIDを使用していますが、それぞれ<iron collapse>に関連付けられた<paper-icon-button>があります。画面が650pxより広いですが、狭い幅で、なぜ<paper-icon-button><iron-collapse>をトグルしませんクリックしたときに

私はそれに関連するボタンで<iron-collapse> Sを使用することができますか？

私はさらに特定の<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）です：あなたは<iron-collapse>.toggle()を呼び出していないので、窓が650px未満のとき

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がトグルしないが、そのシナリオでは、代わりに、あなたは内部クラスをトグルしています。 には常にのトグルが表示されるように意図されているようですので、常に<iron-collapse>.toggle()と呼ぶべきです。

また、シャドウDOMでは機能しないため、<iron-collapse>をフェッチするために、クリックハンドラでdocument.getElementById()を使用しないでください。代わりに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"; 
} 

<paper-icon-button>で<iron-collapse>をトグルし、アイコンのcomputed bindingを使用しています。このcodepenデモを参照してください：

あなたのコードはより次のようになります。そして、このcodepenを参照すると、ヘッダーをクリック可能なトグルにすることができます。