顯示隱藏的文本框與高分子按下按鈕後

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是一個非常簡單的操作。