function - 就绪功能togglePanel()不工作-6ren

function - 就绪功能togglePanel()不工作

转载作者：行者123 更新时间：2023-12-04 15:45:13

26

4

我有这个代码

<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 显示此错误:未捕获的类型错误:未定义不是函数

引用这个函数:drawerPanel.togglePanel();

你能帮我吗？

最佳答案

我的愚蠢错误。调用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>

关于function - 就绪功能togglePanel()不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27676014/

26

4

0

文章推荐： listview - Sencha 触摸列表分页 : limit number of record of the store

文章推荐： maven - 从其他项目中提取 gradle 测试 jar

文章推荐： unit-testing - 运行所有 zend framework2 单元测试

android - polymer TogglePanel 在 iphone 上闪烁
我正在尝试使用 polymer 制作单页。这些代码在 android 移动网络和桌面上运行良好，但在 iphone(chrome 和 safari)上，每当我尝试切换菜单栏面板时，屏幕都会闪烁

首页

博学

6Ren·AI

商城

function - 就绪功能togglePanel()不工作