Question

我正在学习Polymer，我在做菜单时遇到了一些问题。显然，当我添加下拉菜单时，它始终显示打开，它不会随意关闭和打开。另外，我检查了Polymer及其演示的github repo中的代码，无法找出我做错了什么。

          <paper-toolbar>
            <paper-menu-button>
      <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
      <paper-menu class="dropdown-content">
        <paper-item>Share</paper-item>
        <paper-item>Settings</paper-item>
        <paper-item>Help</paper-item>
      </paper-menu>
    <paper-menu-button>

</paper-menu-button>
      <div class="title">Title</div>
      <paper-icon-button icon="refresh"></paper-icon-button>
      </paper-toolbar>

Answer 1

您之前有额外的<paper-menu-button> </paper-menu-button> <div class="title">Title</div>

这是您的代码看起来的样子

<base href="http://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">

<link href="paper-input/paper-input.html" rel="import">
<link href="paper-slider/paper-slider.html" rel="import">
<link href="paper-toolbar/paper-toolbar.html" rel="import">
<link href="paper-menu/paper-menu.html" rel="import">
<link href="paper-menu-button/paper-menu-button.html" rel="import">
<link href="paper-item/paper-item.html" rel="import">
<link href="paper-icon-button/paper-icon-button.html" rel="import">
  <link rel="import" href="iron-icons/iron-icons.html">

<dom-module id="my-app">
  <template>

    <paper-toolbar>
      <paper-menu-button>
        <paper-icon-button icon="menu" class="dropdown-trigger">+</paper-icon-button>
        <paper-menu class="dropdown-content">
          <paper-item>Share</paper-item>
          <paper-item>Settings</paper-item>
          <paper-item>Help</paper-item>
        </paper-menu>
      </paper-menu-button>

      <div class="title">Title</div>
      <paper-icon-button icon="refresh"></paper-icon-button>
    </paper-toolbar>



  </template>
  <script>
     addEventListener('WebComponentsReady', function() {
      Polymer({
      is: 'my-app',

      properties: {

      }


    }); 

    });
  </script>
</dom-module>
<my-app></my-app>

我不知道您是否导入了所有必需的imports，但这里是Plunkr，您可以看到它的实际效果

下拉菜单打开了

1 个答案: