Question

我被困住了。我正在使用聚合物，但我无法在抽屉面板上调用togglePanel函数，我的代码如下所示：

    <!DOCTYPE html>
<html>
  <head>
    <!-- 1. Load platform.js for polyfill support. -->
    <script src="bower_components/platform/platform.js"></script>

    <!-- 2. Use an HTML Import to bring in the element. -->
    <link rel="import"
        href="bower_components/core-ajax/core-ajax.html">

    <link rel="import"
        href="bower_components/core-drawer-panel/core-drawer-panel.html">

    <link rel="import"
        href="bower_components/core-toolbar/core-toolbar.html">

    <link rel="import"
        href="bower_components/core-icon-button/core-icon-button.html">
  </head>
  <body>

    <script>
        function openDrawer() {
            alert("fuck");
            var drawer = document.getElementById("main-drawer");
            drawer.togglePanel();
        }
    </script>

    <core-drawer-panel id="main-drawer">
        <div drawer style="background-color: #FF0000;">

        </div>
        <div main style="background-color: #00FF00;">
            <core-toolbar style="background-color: #8888FF;">
                <core-icon-button icon="menu" onclick="openDrawer()" on-tap="openDrawer()"></core-icon-button>
                    <div flex>PageTitle</div>
            </core-toolbar>
        </div>
    </core-drawer-panel>
  </body>
</html>

单击菜单按钮时会调用该函数，但没有其他事情发生，我确保使用警报。

我想这与影子DOM有关，但我不确定。我希望有人知道如何调用它的功能。

Answer 1

如果窗口大小小于core-drawer-panel，

responsiveWidth会一直保持打开状态。默认情况下，除非您使用的是平板电脑或更小的设备，否则它通常会保持打开状态。

如果您将responsiveWidth设置得非常高，则可以更改行为，以便仅按需打开。

<core-drawer-panel id="main-drawer" responsiveWidth="900em">

http://jsbin.com/zorufa/2/edit

Answer 2

另一种方法是保持抽屉关闭。编辑core-drawer-panel.hmlt中的代码并编辑forceNarrow=true的发布属性如果为true，则忽略responsiveWidth设置并强制缩小布局。
或者使用javascript

$scaffold = document.querySelector('scaffold');
$scaffold.shadowRoot.querySelector('core-drawer-panel').forceNarrow = true;
$scaffold.closeDrawer();

聚合物导航抽屉面板上的调用功能

2 个答案: