Polymer 如何在聚合物中更改堆芯折叠开关上的图标？

是否有任何方法可以在不使用jquery的情况下更改

堆芯折叠

上的聚合物

堆芯图标

这是我的密码

  <template repeat="{{contacts}}">
                <div style="margin-top:10px;" class="page-holder contact-dropdown dropdown-holder " horizontal layout center center-justified
                     on-tap="{{toggle}}" ident="{{cardID}}">
                    <div><img  src="http://lorempixel.com/80/80"></div>
                    <div flex style="margin-left:15px;">
                        <p class="user-name">Name</p>

                        <p class="user-dropdown-info">City <span class="blue bold"
                                                                   style="margin-right:15px;">City</span> nr <span
                                class="red bold">297493</span></p>
                    </div>
                    <div> <core-icon style="margin-left:-10px;"  ident="{{oldIcon}}"  class="down-icon" icon="arrow-drop-down"></core-icon>
                        <core-icon style="margin-left:-10px;display: none;  "  ident="{{newIcon}}"  class="down-icon" icon="arrow-drop-up"></core-icon></div>


                </div>
                <div class="page-holder dropdown-holder" horizontal layout center center-justified>
                  <core-collapse class="collapse-content" id="{{cardID}}">
                        <div class="page-holder page-border" horizontal layout center center-justified>
                            <div>
                                <core-icon class="dropdown-icon collapsed-holder" icon="fa:phone"></core-icon>
                            </div>
                            <div flex><p class="text-dropdown">Call</p></div>
                        </div>
                        <div class="page-holder page-border " horizontal layout center center-justified>
                            <div>
                                <core-icon  class="dropdown-icon collapsed-holder" icon="fa:envelope"></core-icon>
                            </div>
                            <div flex><p class="text-dropdown">Send e-mail</p></div>
                        </div>
                        <div class="page-holder page-border" horizontal layout center center-justified>
                            <div>
                                <core-icon  class="dropdown-icon collapsed-holder" icon="fa:mobile"></core-icon>
                            </div>
                            <div flex><p class="text-dropdown">Send Msg</p></div>
                        </div>
                    </core-collapse>
                </div>
              </template>

我认为实现您想要做的事情的最“聚合”的方法是依靠数据绑定，而不需要任何额外的代码，绑定到

core collapse

元素的

opened

属性，并使用带条件绑定的

hidden

布局属性隐藏图标

最小样本：

<template>
  <core-icon hidden?="{{opened}}" icon="arrow-drop-down" on-click="{{toggle}}"></core-icon>
  <core-icon hidden?="{{!opened}}" icon="arrow-drop-up" on-click="{{toggle}}"></core-icon>
  <core-collapse id="collapse" opened="{{opened}}"><div>Content</div></core-collapse>
</template>
<script>
  Polymer({
    toggle: function () {
      this.$.collapse.toggle();
    }      
  });
</script>

所容纳之物
聚合物({
切换：函数（）{
这是$.collapse.toggle（）；
}      
});

this.shadowRoot.getElementsByClassName

不返回任何内容的原因是，您正在查询元素的light DOM，但元素位于阴影DOM中，因此必须改用

this.shadowRoot.getElementsByClassName

<template>
  <core-icon hidden?="{{opened}}" icon="arrow-drop-down" on-click="{{toggle}}"></core-icon>
  <core-icon hidden?="{{!opened}}" icon="arrow-drop-up" on-click="{{toggle}}"></core-icon>
  <core-collapse id="collapse" opened="{{opened}}"><div>Content</div></core-collapse>
</template>
<script>
  Polymer({
    toggle: function () {
      this.$.collapse.toggle();
    }      
  });
</script>