我有以下代码
<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
即使我知道点击纸图标按钮的处理程序正在工作并调用文本框也不会出现。
最佳答案
为什么不使用 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。
关于javascript - 按下按钮后显示带有 Polymer 的隐藏文本框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30918427/