javascript - 按下按钮后显示带有 Polymer 的隐藏文本框

Question

我有以下代码

<dom-module id="practice-list">
    <template>
        <paper-drawer-panel>
            <paper-header-panel main mode="waterfall-tall">
                <paper-toolbar id="mainToolbar">
                    <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
                    <span class="flex"></span>
                    <paper-icon-button icon="search" on-tap="srchandler" id="srchandler"></paper-icon-button>
                    <input type="text" id="searchText" show$="{{show}}" />
                    <div class="middle paper-font-display2 app-name ident">Practice List</div>
                </paper-toolbar>
            </paper-header-panel>
        </paper-drawer-panel>
    </template>

    <script>
        Polymer({
            is: "practice-list",
            show: {
                type: Boolean,
                value: false
            },
            ready: function () {
            },
            srchandler: function () {
                this.show = !this.show;
                alert('Is it showing?');
            }
        });
    </script>
</dom-module>

依次使用下面的css

#searchText
{
    width:0px;
    border: none;
    line-height:30px;
    border-radius:5px;

    background:#3F59B5;
    color:#fff;

    outline: 0;

    visibility: hidden;

}

#searchText[show] input {
    padding: 10px;
    visibility: visible;
    width:200px;

}

现在我尝试使用此处描述的技术，但无济于事。

polymer search input text from icon

即使我知道点击纸图标按钮的处理程序正在工作并调用文本框也不会出现。

Answer 1

为什么不使用 HTML5 属性hidden？ (有关详细信息，请参阅 here)

您的输入将更改为:

<input type="text" id="searchText" hidden$="{{hidden}}" />

然后在您的 CSS 中，您可以删除 visibility 规则和 show 属性:

#searchText {
    border: none;
    line-height: 30px;
    border-radius: 5px;
    background: #3F59B5;
    color: #fff;
    outline: 0;
}

#searchText input {
    padding: 10px;
    width: 200px;
}

并将属性 show 更改为 hidden 以使事情更合乎逻辑:

hidden: {
    type: Boolean,
    value: true
},

Here是一个非常简单的 plunker。