聚合物導航抽屜雙擊打開

我按照聚合物演示創建了一個帶有圖標的導航抽屜，以便點擊打開它。該演示只需點擊一下即可打開導航抽屜，但當我用自己的代碼嘗試時，需要雙擊才能打開。任何理由？我已經從演示中直接複製了代碼。函數openDrawer（）看起來正確，但雙擊打開抽屜。我不知道爲什麼它不會在第一次點擊時打開。聚合物導航抽屜雙擊打開

<body fullbleed> 
<template is="auto-binding" id="tmp"> 
    <core-drawer-panel id="drawerPanel"> 
     <core-header-panel drawer id="drawer" mode="seamed"> 
      <core-toolbar id="navheader"> 
       <span>Menu</span> 
      </core-toolbar> 
      <core-menu selected="{{option}}" valueattr="data-category"> 

      </core-menu> 
     </core-header-panel> 
     <core-header-panel main id="main" mode="seamed"> 

      <core-toolbar id="mainheader"> 
       <paper-icon-button id="navicon" icon="menu" onclick="openDrawer()"></paper-icon-button> 
       <span flex>Booklet</span> 
      </core-toolbar> 


     </core-header-panel> 
    </core-drawer-panel> 
    </template> 

    <script> 
     document.addEventListener('polymer-ready', function() { 
      var pageStart = document.querySelector('#tmp'); 
      pageStart.option = 'home'; 

     }); 

     function openDrawer() { 
      var navicon = document.getElementById('navicon'); 
      var drawerPanel = document.getElementById('drawerPanel'); 
      navicon.addEventListener('click', function() { 
       drawerPanel.togglePanel(); 
      }); 
     } 

    </script> 

</body>

來源

2015-03-13 blitz

您使用的是什麼瀏覽器？ – flyandi 2015-03-13 19:37:26

我正在使用谷歌瀏覽器 – blitz 2015-03-13 20:05:47

請給我們一些代碼 – 2015-03-14 05:49:36

我看到幾個問題。

由於您擁有自動綁定模板中的所有內容，因此您需要監聽template-bound而不是polymer-ready。只有當template-bound火災時，你的元素纔會被加蓋到DOM上。

另一個問題是您要在您的openDrawer方法中添加點擊監聽器。您想要在template-bound處理程序中添加點擊偵聽器。

Here's a jsbin example

<body fullbleed> 
    <template is="auto-binding" id="tmp"> 
    <core-drawer-panel id="drawerPanel"> 
     <core-header-panel drawer id="drawer" mode="seamed"> 
     <core-toolbar id="navheader"> 
      <span>Menu</span> 
     </core-toolbar> 
     <core-menu selected="{{option}}" valueattr="data-category"> 
      <core-item>Foo</core-item> 
      <core-item>Bar</core-item> 
      <core-item>Baz</core-item> 
     </core-menu> 
     </core-header-panel> 
     <core-header-panel main id="main" mode="seamed"> 

     <core-toolbar id="mainheader"> 
      <paper-icon-button id="navicon" icon="menu"></paper-icon-button> 
      <span flex>Booklet</span> 
     </core-toolbar> 


     </core-header-panel> 
    </core-drawer-panel> 
    </template> 

    <script> 
    document.addEventListener('template-bound', function() { 
     var navicon = document.getElementById('navicon'); 
     var drawerPanel = document.getElementById('drawerPanel'); 
     navicon.addEventListener('click', function() { 
     drawerPanel.togglePanel(); 
     }); 
    }); 
    </script> 


</body>

來源

2015-03-14 15:32:49 robdodson

聚合物導航抽屜雙擊打開

回答

相關問題