Question

我试图创建一个可切换的菜单，但由于某种原因隐藏的属性不起作用。它不会为任何一个值工作，所以我不认为它是一个数据绑定问题。

我在我的项目的其他部分以及其他javascript搜索和框架中使用此方法，它永远不会变得更复杂，所以我无法看到我做错了什么。

有什么想法吗？

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymerfire/firebase-auth.html">
<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">


<dom-module id="user-account-menu">

    <template>

        <style>
            img {
                width: 72px;
                height: 72px;
            }
            paper-menu {
                position: absolute;
                right: 15px;
                width: 200px;
                background: #A3A3A3;
            }
        </style>


        <firebase-auth
            id="auth"
            signed-in="{{signedIn}}"
            user="{{user}}">
        </firebase-auth>


        <!-- start the account dropdon -->
        <div>
            <img src="{{computePhotoURL()}}">

            <paper-menu hidden$="{{show}}">
              <paper-item>This is a menu item</paper-item>
              <paper-item>[[show]]</paper-item>
            </paper-menu>
        </div>

    </template>

    <script>
        Polymer({
            is: 'user-account-menu',

            properties: {
                show: {
                    type: Boolean,
                    value: true
                }
            },

            computePhotoURL: function() {
                // get the users photo, if one doesn't exist, 
                // get the default user avatar
                var photo;

                try {
                    photo = this.user.photoURL;
                    return photo;
                } catch(err) {
                    return 'https://developers.google.com/experts/img/user/user-default.png';
                }
            },
        });
    </script>

</dom-module>

更新（来自dom的纸质菜单的css）：

element.style {
}
<style>…</style>
paper-menu {
    position: absolute;
    right: 15px;
    width: 200px;
    background: #A3A3A3;
}
<style>…</style>
:host {
    display: block;
    padding: 8px 0;
    background: #ffffff;
    color: #212121;

Answer 1

另一个选择就是将其添加到您的样式中：

<style>
  [hidden] {
    display: none !important;
  }
</style>

Answer 2

display: block组件的paper-menu设置会破坏hidden功能。

无论如何，使用hidden属性被认为是不好的做法，因为您遇到了这个问题。它与display设置冲突。

我建议使用

<template dom-if="..." 或
添加/删除隐藏的类和CSS规则.hidden { display: none; }（这也适用于IE9，它不会识别hidden属性。

Answer 3

尝试从?

中删除hidden?="{{show}}"

Polymer 1.0隐藏$ =＆＃34; {{show}}＆＃34;不工作

3 个答案: