Question

有没有办法在core-icon崩溃时更改聚合物core-collapse而不使用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>

我试图在toggle函数中触发函数，但我认为这不是一个好主意，因为firebug控制台将null返回为Icon变量。

      IconClick: function(event, detail, sender) {
          var Icon=   this.getElementsByClassName('down-icon')[0];
          Icon.toggle();
        },
        toggle: function (e, detail, sender) {
            this.IconClick();
        }

Answer 1

我认为实现你想要做的最“聚合”的方法是依靠数据绑定而不需要任何额外的代码，绑定到core-collapse元素的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>布局属性的图标。

最小样本：

this.getElementsByClassName

this.shadowRoot.getElementsByClassName没有返回任何内容的原因是因为您正在查询元素的轻量级DOM，但您的元素位于影子DOM中，因此您必须使用for line in lines1: print line,代替。

如何更改聚合物中核心折叠切换的图标？

1 个答案: