纸卡内的纸质商品只能选择熨斗图标

Question

我在与可选择的paper-item个对象列表进行交互时遇到问题。 on-tap（或on-click）函数仅在我单击项目中的iron-icon时触发，但单元格的其余部分无响应。我目前正在paper-menu内显示这些项目，但我尝试使用iron-selector产生相同的行为。

<paper-menu selected="{{selected}}">
    <paper-item on-tap="_onItemTap" role="menuitem">
        <iron-icon icon="cloud-done"></iron-icon>
        <paper-item-body two-line>
            <div>file_1.json</div>
            <div secondary class="second-item-line">Complete</div>
            </paper-item-body>
    </paper-item>
    (... other items)
</paper-menu>

paper-menu嵌套在neon-animated-pages元素和paper-card元素中。我不知道这是否会影响它的行为。

我错过了什么吗？有没有办法让我刚刚没有实现的整个paper-item可点击？或者其他因素可能会干扰？

更新

进一步挖掘后，我发现如果我从paper-card元素的上下文中删除它，我的'paper-item'元素列表就可以正常工作。当我将列表放入卡片中时，它会以某种方式掩盖可选区域（但iron-icon仍然暴露）。有没有办法在此上下文中将整个paper-item元素公开给选择？如果没有，我将不得不重新设计我的用户界面而不使用paper-card。

Answer 1

我明白了。傻傻的，真的。由于我的列表不在div class="card-content"内，paper-item元素未显示在卡片的顶层，因此无法使用。在我的内容周围添加该类的div解决了我的问题。以下是代码的结果：

<paper-card>
<div class="card-content">
    <iron-selector selected="{{selected}}">
        <paper-icon-item on-tap="_onItemTap">
            <iron-icon icon="cloud-done" item-icon></iron-icon>
            <paper-item-body two-line>
                <div>file_1.json</div>
                <div secondary>Complete</div>
            </paper-item-body>
        </paper-icon-item>
        <!-- other items -->
    </iron-selector>
</div>
</paper-card>