Question

示例：

<body ng-app="app">
<div contenteditable="true" style="line-height: 90%; border-radius: 25px; border: 2px solid #0000FF; padding: 10px; width: 96%; min-height: 70px;" >
</body>

它有效

但如果我添加滑动菜单不起作用：

JSFiddle

<body ng-app="app">
<ons-sliding-menu
    menu-page="menu.html" main-page="hola.html" side="left"
  </ons-sliding-menu>
    <ons-template id="hola.html">
      <div contenteditable="true" style="line-height: 90%; border-radius: 25px; border: 2px solid #0000FF; padding: 10px; width: 96%; min-height: 70px;" >
                                </div>
  </ons-template>
</body>

的javascript：

angular.module('app', ['onsen']);

提前致谢

Answer 1

这是一个带有代码的滑动菜单的代码笔 - 它会阻止用户输入，我不肯为什么他们这样做，但css至少覆盖chrome中的函数。 https://codepen.io/anon/pen/rLxPOa通常，您应该将代码包装在ons-page。

中

此外，我认为滑动菜单仅降级为Angular 1绑定，建议使用ons-splitter。它具有相同的功能和更多的选项，最重要的是，没有CSS黑客使其工作。

这是一个功能正常的codepen，可以显示你的div工作但是使用拆分器：https://codepen.io/anon/pen/qNbgZR?editors=101

<ons-splitter>
  <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
    <ons-page>
      <ons-list>
        <ons-list-item onclick="fn.load('home.html')" tappable>
          Home
        </ons-list-item>
        <ons-list-item onclick="fn.load('settings.html')" tappable>
          Settings
        </ons-list-item>
        <ons-list-item onclick="fn.load('about.html')" tappable>
          About
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-splitter-side>
  <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
</ons-splitter>

<ons-template id="home.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.open()">
          <ons-icon icon="md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        Main
      </div>
    </ons-toolbar>
    <div contenteditable="true" style="line-height: 90%; border-radius: 25px; border: 2px solid #0000FF; padding: 10px; width: 96%; min-height: 70px;" >
        </div>
  </ons-page>
</ons-template>

angularjs onsen-ui slide-menu div鼠标不起作用

1 个答案: