Question

我有这段代码

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
    <link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
    <link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
    <link rel="import" href="bower_components/font-roboto/roboto.html">
    <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">

    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<core-drawer-panel>
    <core-header-panel drawer id="section-drawer">
        <div id="logo-container">LOGO</div>
    </core-header-panel>
    <core-header-panel main id="section-main">
        <core-toolbar>
            <paper-icon-button icon="menu" id="navicon"></paper-icon-button>
            <div class="page-title">TITLE</div>
        </core-toolbar>
    </core-header-panel>
</core-drawer-panel>
<script>
    function standardPolymerLoad() {
        setMenuAction();
    }

    function setMenuAction() {
        var navicon = document.getElementById('navicon');
        drawerPanel = document.getElementById('section-drawer');
        navicon.addEventListener('click', function() {
            drawerPanel.togglePanel();
        });
    }

    document.addEventListener("polymer-ready", standardPolymerLoad);
</script>

但是当我点击纸质图标按钮时，chrome会显示以下错误：未捕获的TypeError：undefined不是函数

指的是这个函数：drawerPanel.togglePanel（）;

你能帮助我吗？

Answer 1

我的愚蠢错误。调用togglePanel（）的元素必须是core-drawer-panel，而不是抽屉元素。

<core-drawer-panel id="drawerPanel">
    <core-header-panel drawer id="gw-section-drawer">
        <div id="logoContainer">LOGO</div>
    </core-header-panel>
    <core-header-panel main id="sectionMain">
        <core-toolbar>
            <paper-icon-button icon="menu" id="navicon"></paper-icon-button>
            <div class="pageTitle">TITLE</div>
        </core-toolbar>
    </core-header-panel>
</core-drawer-panel>
<script>
    document.addEventListener("polymer-ready", function() {
        document.getElementById('navicon').addEventListener('click', function() {
            document.getElementById('drawerPanel').togglePanel();
        })
    });
</script>

Answer 2

Giuseppe是正确的，请记住我们使用切换并想要调用完整的核心抽屉面板，将ID放在核心标题面板上不会工作，因为它不是完整的抽屉，但它希望切换只有实际的标题。

ready-function togglePanel（）不起作用

2 个答案: